How to style the option of an html select element?
There are only a few style attributes that can be applied to an <option>
element.
This is because this type of element is an example of a "replaced element". They are OS-dependent and are not part of the HTML/browser. It cannot be styled via CSS.
There are replacement plug-ins/libraries that look like a <select>
but are actually composed of regular HTML elements that CAN be styled.
How to style HTML select/option tag?
It is difficult to style select menu with css. The Best way of doing it is with jquery u can style and have a better control over the code with jquery. Just use a custom jquery like http://gregfranko.com/jquery.selectBoxIt.js/
I have just made an example of styling select with jquery, you can check the demo here
// Code to convert select to UL$('.select').each(function() { var $select = $(this).find('select'), $list = $('<ul />'); $select.find('option').each(function() { $list.append('<li>' + $(this).text() + '</li>'); }); //Remove the select after the values are taken $select.after($list).remove();
//Append Default text to show the selected $(this).append('<span>select</span>') var firsttxt = $(this).find('li:first-child').text(); $(this).find('span').text(firsttxt)
// On click show the UL $(this).on('click', 'span', function(e) { e.stopPropagation(); $(this).parent().find('ul').show(); });
// On select of list select the item $(this).on('click', 'li', function() { var gettext = $(this).text(); $(this).parents('.select').find('span').text(gettext); $(this).parent().fadeOut(); });
})
// On click out hide the UL$(document).on('click', function() { $('.select ul').fadeOut();});
body { font-family: 'arial', san-serif;}
.select { width: 200px; height: 30px; border: 1px solid #ddd; line-height: 30px; position: relative; margin-bottom: 40px;}
.select span { display: block; color: #333; font-size: 12px; padding: 0 10px;}
.select ul { display: none; background: #fff; border: 1px solid #ddd; min-width: 300px; position: absolute; top: 100%; left: 0; list-style-type: none; margin: 0; padding: 0; z-index: 10;}
.select ul > li { font-size: 12px;}
.select ul > li { color: #333; display: block; padding: 2px 8px; text-decoration: none; line-height: 24px;}
.select ul > li:hover { background: #e4f4fa; cursor: pointer;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><label>First Select</label><div class="select"> <select> <option>Item</option> <option>Item 2</option> <option>Item 3</option> </select></div>
<label>Second Select</label><div class="select"> <select> <option>this 1</option> <option>this 2</option> <option>this 3</option> </select></div>
Style option tag HTML
There is limited styling capability for <option>
, as this element is an Operating System element. For better styling of <option>
use plugins. For example this plugin (jquery is required). But you can style the selected element in this way - option[selected]
. I have provided some examples of how you can style your <option>
. Perhaps these are not all possible options.
#from_currency{
background-color: blue;
color: green;
}
#from_currency2{
font-size: 120%;
width: 100%;
}
#from_currency3 option[selected]{
background-color: green;
}
<select id="from_currency" >
<option value="AED">AED</option>
<option value="ARS">ARS</option>
<option value="AUD">AUD</option>
<option value="BGN">BGN</option>
<option value="BRL">BRL</option>
</select>
<select id="from_currency2" >
<option value="AED">AED</option>
<option value="ARS">ARS</option>
<option value="AUD">AUD</option>
<option value="BGN">BGN</option>
<option value="BRL">BRL</option>
</select>
<select id="from_currency3" >
<option value="AED">AED</option>
<option value="ARS">ARS</option>
<option value="AUD" selected>AUD</option>
<option value="BGN">BGN</option>
<option value="BRL">BRL</option>
</select>
Style part of an option in HTML choice list (select)
You can't style your option
tags. You can use libraries like Select 2 that hide your original select
and create a new one, which can be stilized.
Related Topics
Css Change Button Style After Click
Why Can't an Element With a Z-Index Value Cover Its Child
Which Characters Are Valid in CSS Class Names/Selectors
How to Make Bootstrap Columns All the Same Height
Bootstrap Center Vertical and Horizontal Alignment
Vertical Align Center in Bootstrap 4
Font Scaling Based on Width of Container
How to Make an Svg Scale With Its Parent Container
How to Prevent Long Words from Breaking My Div
How to Center ≪Ul≫ ≪Li≫ into a Div
Is Float For Layout Bad? What Should Be Used in Its Place
Show Child Div Within Hidden Parent Div
Html 5 Strange Img Always Adds 3Px Margin At Bottom
Single Huge .Css File Vs. Multiple Smaller Specific .Css Files
How to Force a Div Block to Extend to the Bottom of a Page Even If It Has No Content
Is There a CSS Parent Selector
How to Center Text in Select Box
Amazon S3 Cors (Cross-Origin Resource Sharing) and Firefox Cross-Domain Font Loading