Change text color inside of select menu

Question

I am trying to get the text "FOUND" by the Reg.Exp. to change color inside of a select menu, but not success, any better way to accomplish this:

<span style="padding-right:40px">
<select id="sel" name="sel">
<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Choose</option>

  <script type="text/javascript">
   $( document ).ready(function() {

     var myRegExp = /toy/i; /* this text I am trying to change color */
     var myText = 'This is a toy, from toys';

    if( myRegExp.test(myText) ) {
      myText.replace(/toy/ig, '<span class="green">$1</span>')
     }

   });
  </script>

  <option value="This is a toy, from toys" id="opt">
     This is a toy, from toys
  </option>

Thanks for looking!

You want the option to have different colored text? That is not possible with a select element. — epascarello, Nov 23 '15 at 20:24
http://stackoverflow.com/questions/12836227/change-select-box-option-background-color — Lucky Chingi, Nov 23 '15 at 20:24

This Guy · Answer 1 · 2015-11-23T20:38:01.910

1

This is possible with css. No javascript is necessary. You have an ID declared on your option so use that ID to change the color of your text.

#opt { color: green; }

Take a look at this fiddle I made:

jsFiddle DEMO

Update:

Also, since you have an ID, you do not necessarily need a value specified...which means you could take out the text you have for value="This is a toy, from toys" as its not needed since you have it already written in between the option tag.

Updated fiddle

edited Nov 23 '15 at 20:38

answered Nov 23 '15 at 20:28

This Guy

1,666
2
14
21

I should edit my question, the only part I need to be changed is the work "toy" in this case. – Andre Nov 23 '15 at 20:36
As for only selecting one word out of the text string to have a different color, I do not believe this is possible. – This Guy Nov 23 '15 at 21:02

score 0 · Answer 2 · answered Nov 23 '15 at 20:30

0

$(document).on("change","#sel",function(){
    $(this).find('option').css("color","");
    $(this).find('option:selected').css("color","green");
});

answered Nov 23 '15 at 20:30

talkhabi

2,669
3
20
29

Change text color inside of select menu

2 Answers2