Selected value in select with color

Question

I have a select list which has options with colors (green good option, red bad option etc..). When i click on my select list i see that my options are in colors which i have defined, but when i selected that value i would like that selected value has his own color, not white by default or blue when changing thru options. Below is my code snippet.

<select id="myBox">
  <option style="color:red">
    red
  </option>
  <option style="color:blue">
    blue
  </option>
  <option style="color:green">
    green
  </option>
</select>

Is it possible customize that "default" (blue and white) colors and how?

Another similar question: http://stackoverflow.com/questions/19388011/how-to-change-colour-of-blue-highlight-on-select-box-dropdown — TbWill4321, Dec 09 '15 at 17:39
It is similar, but only about blue highlight. I would like here also that my selected value takes the color of the selected option. — KuKeC, Dec 09 '15 at 17:42

DinoMyte · Answer 1 · 2015-12-09T18:46:17.847

3

You can use change event function on the select and then set its style attribute as the style of the selected option.

<script>
$().ready(function(){
    $("#myBox").on("change",function()
    {
      var style = $(this).find("option:selected").attr("style");  
      $(this).attr("style",style);  
    });
});

http://jsfiddle.net/woj7mers/3/

edited Dec 09 '15 at 18:46

answered Dec 09 '15 at 18:39

DinoMyte

8,737
1
19
26

Thank you for your answer. It helped me a lot. – KuKeC Dec 10 '15 at 10:21
Sure. Glad to help :) – DinoMyte Dec 10 '15 at 19:02

Franco · Answer 2 · 2015-12-09T18:36:10.590

1

@KuKeC You can use jquery for this:

 $(document).ready(function(){

        $('#myBox').change(function(){
            var selectedColor = $('#myBox option:selected').text()
          console.log(selectedColor)
          $('#myBox ').css({'background': selectedColor, 'color' : '#FFFFFF' })
      })
    })

I hope this is what you were looking for. NOTE: I have added an id to your select box.

Here an example for you and eventually following users:

https://jsfiddle.net/8ge7eomr/

If this was usefull for you I will apreciate if you will up vote it.

If you need some more changes for it, just let me know.

edited Dec 09 '15 at 18:36

answered Dec 09 '15 at 17:48

Franco

2,309
1
11
18

Woops! Something is going wrong I will update the fiddle and re-post it – Franco Dec 09 '15 at 18:29
@KuKeC I have updated the answer with working (I hope) the fiddle link. – Franco Dec 09 '15 at 18:37
Thank you for your answer. It helped me a lot. – KuKeC Dec 10 '15 at 10:21

Andrew Mairose · Accepted Answer · 2015-12-09T19:16:52.777

Here is a way to do it without jQuery. Pass a function to the onchange attribute of your select, and add a color attribute to each element. Then in the function you pass to onchange, get the selected item, get it's color attribute, then change the outline and color properties of your select's style.

function selectChanged() {
  var select = document.getElementById("myBox");
  var item = select.options[select.selectedIndex];
  var color = item.getAttribute("color");
  if (color === 'none') {
    select.style.color = "black";
    select.style.outline = "none";
  } else {
    select.style.outline = "solid " + color + " 1px";
    select.style.color = color;
  }
}

<select id="myBox" onchange="selectChanged()">
  <option color="none" style="color: black">
    --
  </option>
  <option color="red" style="color:red">
    red
  </option>
  <option color="blue" style="color:blue">
    blue
  </option>
  <option color="green" style="color:green">
    green
  </option>
</select>

Thank you for your answer. It helped me a lot. – KuKeC Dec 10 '15 at 10:21 — KuKeC, Dec 10 '15 at 10:21

Selected value in select with color

3 Answers3