Menu
I have a SELECT list with several OPTION elements. Here is my naive approach to styling part of the option text:
<select name="color"> <option value="0">red <span style="font-weight: bold;">SLOW</span></option> <option value="1">blue <span style="font-weight: bold;">SLOWER</span></option> <option value="2">green <span style="font-weight: bold;">SLOWEST</span></option> </select> This does not work: the browser does not like a SPAN element inside the OPTION element.
Is there some other way to style part of an OPTION element's text?
834
To change the selected option background-color CSS style, we can set the style attribute of the select and option elements. to set the whole select element to background color 009966 and color FFF . Then we override the the styles in the option elements with style="background: white; color: black;" .
The main trick is to apply appearance: none which lets you override some of the styling. It doesn't replace the OS select menu UI element so all the problems related to doing that are non-existant (not being able to break out of the browser window with a long list being the main one).
There are many ways to design a <select> dropdown menu using CSS. The Dropdown Menu is mainly used to select an element from the list of elements. Each menu option can be defined by an <option> element that can nested inside the <select> element.
But you could always create a Custom select box. Refer the jsFiddle below,
JSFiddle for multi colored selectbox options
// Insert a list item into the unordered list for each select option for (var i = 0; i < numberOfOptions; i++) { $('<li />', { html: $this.children('option').eq(i).text() .split(' ').join(' <span style="color:red">'), rel: $this.children('option').eq(i).val() }).appendTo($list); } Or you could do it with Bootstrap Drop Downs plus a couple lines of Javascript.
Here is the Bootstrap example with a slight alteration plus a 'lil Javascript:
$(function() { $('#my-select').find('li').click(function() { $('#selected').html($(this).html()); }); });<head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script> <script class="cssdeck" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> </head> <body> <!-- Single button --> <div id='my-select' class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span id="selected">Action</span> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action <span style='color:red'>like Super Man</span></a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
