Color text in custom user meta search fields

This topic has 13 replies, 2 voices, and was last updated 7 years ago by sabbella.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
May 14, 2019 at 8:57 am #22619

sabbella
Participant

Hello,

I have many search fields (custom user meta) in my form.

I’d like to know how to give a color to the text of the dropdowns only if they are selected.

Thank you,

May 14, 2019 at 8:59 am #22620

sabbella
Participant

(it will make more easy to my users to see what options they have selected, for the next search)

May 14, 2019 at 9:31 am #22623

Ernest Marcinko
Keymaster

Hi!

I am not sure if this is possible to be honest. I don’t think there is a way of telling if a drop-down box has changed via CSS, it is always considered as ‘selected’, since every value is a selection. I know it is possible to change the item colors somehow, but it will change all the text colors within the selection. Let me know if you have an example of this somewhere, maybe I can somehow integrate it with a bit of custom code.

May 14, 2019 at 9:51 am #22626

sabbella
Participant

Hi Ernest,

Something like this?
https://stackoverflow.com/questions/8635317/how-do-change-the-color-of-the-select-boxs-option-text
http://jsfiddle.net/fMQeq/472/

Or maybe giving a color background if selected?

Thank you,

May 14, 2019 at 2:24 pm #22633
Ernest Marcinko
Keymaster
Hi,

Thanks, that may actually help, however you will need both a custom script and a custom CSS code.

1. Add this custom code to the functions.php in your theme/child theme directory. Before editing, please make sure to have a full site back-up just in case!
```
add_action('wp_footer', 'asp_custom_option_color');
function asp_custom_option_color() {
  ?>
  <script>
  jQuery(function($){
  	var color1 = '#aaa';
        var color2 = '#000';
    
  	$('select').on('change', function(){
    	if ( $(this).prop('selectedIndex') == 0 ) {
      	    $(this).css('color', color1);
         } else {
      	    $(this).css('color', color2);
         }
    });
  });
  </script>
  <?php
}
```
2. Also, use this custom CSS:
```
select {color: #aaa}
option:not(first-child) {color:#000}
```
This should basically colorize the first option to grey, and the other ones black, and also handles the changes.
May 14, 2019 at 3:20 pm #22640

sabbella
Participant

Hi Ernest, it works in the moment when selecting the options, but not after clicking the search button (the search form doesn’t keep the color with the selected option)

Thank you very much,

May 14, 2019 at 3:29 pm #22641

sabbella
Participant

P.S. Also, you have to select first one option and then the ||Any value** to get ||Any value** coloured (grey). By default ||Any value** appears black instead of grey

||Any value**
sample_value1||Sample Label 1
sample_value2||Sample Label 2

May 15, 2019 at 8:15 am #22652
Ernest Marcinko
Keymaster
Hi,

Maybe this variation would work better:
```
add_action('wp_footer', 'asp_custom_option_color');
function asp_custom_option_color() {
  ?>
  <script>
  jQuery(function($){
  	var color1 = '#aaa';
        var color2 = '#000';
    
  	$('select').on('change', function(){
    	if ( $(this).prop('selectedIndex') == 0 ) {
      	    $(this).css('cssText', 'color: ' + color1 + ' !important;');
         } else {
      	    $(this).css('cssText', 'color: ' + color2 + ' !important;');
         }
    });
  });
  </script>
  <?php
}
```
and the css:
```
select {color: #aaa !important;}
option:not(first-child) {color:#000 !important;}
```
This may not work perfectly either, but I think it’s as close as it can possibly get.
May 15, 2019 at 8:42 am #22655

sabbella
Participant

Thank you Ernest; it works better, but maintains the grey color if an option is selected (after clicking the return button) instead of let the grey color for no-choosen option

May 15, 2019 at 2:42 pm #22672

Ernest Marcinko
Keymaster

Hi,

I’m not sure if I can resolve that, I’m afraid. I tried a few different solutions as well, but this one was the only one working to some degree.

May 15, 2019 at 2:44 pm #22675

sabbella
Participant

Ok thank you Ernest 🙂

May 15, 2019 at 6:05 pm #22680

sabbella
Participant

Hello again Ernest,

After thinking about it, I think the problem could be here:

$(‘select’).on(‘change’, function(){

That code tells “on change” to change the color; but when a search is done there is “no change”, the field comes as it is, so it doesn’t keep the color.

May 16, 2019 at 8:02 am #22694
Ernest Marcinko
Keymaster
You might be right. Maybe try this one, where it will run the coloring section upon page load, even if there was no change:
```
add_action('wp_footer', 'asp_custom_option_color');
function asp_custom_option_color() {
  ?>
  <script>
  jQuery(function($){
  	var color1 = '#aaa';
        var color2 = '#000';
    
  	$('select').on('change', function(){
    	   if ( $(this).prop('selectedIndex') == 0 ) {
      	    $(this).css('cssText', 'color: ' + color1 + ' !important;');
           } else {
      	    $(this).css('cssText', 'color: ' + color2 + ' !important;');
           }
         });
  	$('select').each(function(){
    	   if ( $(this).prop('selectedIndex') == 0 ) {
      	    $(this).css('cssText', 'color: ' + color1 + ' !important;');
           } else {
      	    $(this).css('cssText', 'color: ' + color2 + ' !important;');
           }
         });
  });
  </script>
  <?php
}
```
May 16, 2019 at 8:52 am #22695

sabbella
Participant

Works perfectly! thank you very much Ernest 🙂
Author

Posts

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.