change color of selectbox value/label

 
1
0
-1

hi

is it possible to change colors of select box labels?

i tried with directly coding html color in to the option label as below

<p style="background-color:Blue;">Stream Blue</p>

but the whole code shows up with out the background color change

how do i change the background color of each option?, each option would have its own color
e.g. Strema Blue will be blue, Strem Red will be red etc...

thanks in advance

    CommentAdd your comment...

    1 answer

    1.  
      1
      0
      -1

      Hi, you could try using custom JavaScript instead to change the HTML element attributes like in https://stackoverflow.com/questions/17936588/changing-text-color-in-select-boxes.

      1. Dumidu Roshan

        Hi Anders

        i tried this code 

        <script type="text/javascript">
    $(document).ready
    (
        function()
        {
		$("#Assembly_Group").find("option").css("color", "white");
		$("#Assembly_Group").find("option").css("background-color", "red");
        }
    );
</script>

        Assembly_Group is the name of the selectbox
        no luck, also changed the document event to change still no luck

        Also, i forgot to mention, this paticular select box is in a section with a visibility rule, and only visible on another slectbox selection value

        i tried this code, it changed the whole selectbox, im looking to change individual option to have colors

        i have updated the question to reflect these requirment

        thanks

        Dumidu Roshan 

      2. Dumidu Roshan

        i used the follwoing code in jsfiddle, it does produce a selectbox with each item with its own background and text color


        $(function(){   

$('#Assembly_Group').children().each(
        function (){
            if($(this).val() == "BLUE"){
                $(this).css({'color':'white'});
                $(this).css({'background':'blue'});
            }
             if($(this).val() == "GREY"){
                $(this).css({'background':'grey'});
            }
             if($(this).val() == "GREEN"){
                $(this).css({'background':'green'});
            }
             if($(this).val() == "ORANGE"){
                $(this).css({'background':'orange'});
            }
             if($(this).val() == "YELLOW"){
                $(this).css({'background':'yellow'});
            }
             if($(this).val() == "PURPLE"){
                $(this).css({'color':'white'});
                $(this).css({'background':'purple'});
            }
             if($(this).val() == "Main Build"){
                $(this).css({'background':'white'});
            }
             if($(this).val() == "Testing"){
                $(this).css({'background':'white'});
            }
        }
);
}
)

        somehow this implementation does not work in joget

        any help is much appriciated

      CommentAdd your comment...