Question & Answer > View Question

change color of selectbox value/label

Confluence User - 31 Jan, 2023

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

html;selectbox

3

Confluence User •

01 Feb, 2023 •

confluenceUser •

•

confluenceUser •

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.

Confluence User •

16 Feb, 2023 •

confluenceUser •

•

confluenceUser •

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

Confluence User •

17 Feb, 2023 •

confluenceUser •

•

confluenceUser •

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

1

CSV | Excel | XML | PDF

Your answer

Print

change color of selectbox value/label

3

RELATED QUESTIONS

Your answer

To answer a question you'll need an account.

change color of selectbox value/label.builder-style-8cb79414-32db-4480-990e-e33cf12a5c4e{background: #efefef59 !important; margin: 0px !important; padding: 10px !important; border-radius: 5px !important; border: 1px solid #ddd !important; text-align: left !important; color:#0E4A40 !important;}

3.builder-style-0b072725-6fb6-421b-9d40-2d396e31bf00{color:#008C60 !important;}

RELATED QUESTIONS

Your answer.builder-style-423bdb23-7379-41a3-9450-356be31b26ee{color:#008C60 !important; margin-left:10px !important;}

To answer a question you'll need an account.

change color of selectbox value/label

3

Your answer