Color text in custom user meta search fields

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Color text in custom user meta search fields

This topic contains 13 replies, has 2 voices, and was last updated by sabbella sabbella 3 years, 4 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #22619
    sabbella
    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,

    #22620
    sabbella
    sabbella
    Participant

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

    #22623
    Ernest Marcinko
    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.

    Best,
    Ernest Marcinko

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


    #22626
    sabbella
    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,

    #22633
    Ernest Marcinko
    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.

    Best,
    Ernest Marcinko

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


    #22640
    sabbella
    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,

    #22641
    sabbella
    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

    #22652
    Ernest Marcinko
    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.

    Best,
    Ernest Marcinko

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


    #22655
    sabbella
    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

    #22672
    Ernest Marcinko
    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.

    Best,
    Ernest Marcinko

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


    #22675
    sabbella
    sabbella
    Participant

    Ok thank you Ernest 🙂

    #22680
    sabbella
    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.

    #22694
    Ernest Marcinko
    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
    }
    Best,
    Ernest Marcinko

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


    #22695
    sabbella
    sabbella
    Participant

    Works perfectly! thank you very much Ernest 🙂

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

You must be logged in to reply to this topic.