Color text in custom user meta search fields

[sabbellaParticipant]

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,

[sabbellaParticipant]

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

[Ernest MarcinkoKeymaster]

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.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[sabbellaParticipant]

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,

[Ernest MarcinkoKeymaster]

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.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[sabbellaParticipant]

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,

[sabbellaParticipant]

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

[Ernest MarcinkoKeymaster]

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.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[sabbellaParticipant]

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

[Ernest MarcinkoKeymaster]

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.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[sabbellaParticipant]

Ok thank you Ernest 🙂

[sabbellaParticipant]

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.

[Ernest MarcinkoKeymaster]

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
}

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[sabbellaParticipant]

Works perfectly! thank you very much Ernest 🙂

[Author]

Posts