Here's my HTML:
<select id="ddlProducts" name="ddProducts">
<option>Product1 : Electronics </option>
<option>Product2 : Sports </option>
</select>
I want to make the name of the product (i.e. 'Product1', 'Product2' , etc) bold, and its categories(viz. Electronics, Sports, etc) italicized, using CSS only. I found an old question that mentioned it's not possible using HTML and CSS, but hopefully, there's a solution now.
This question is related to
html
css
drop-down-menu
Here's some ways to style <option>
along with the <select>
if you're using Bootstrap and/or jquery. I understand this isn't what the original poster is asking but I thought I could help others that stumble onto this question.
You can still achieve the goal of styling each <option>
separately, but may need to apply some style to the <select>
as well. My favorite is the "Bootstrap Select" library mentioned below.
If you're already using bootstrap, you can try the Bootstrap Select library or the library below (since it has a bootstrap theme).
Note that you are able to style the entire select
element, or the option
elements separately.
Examples:
Dependencies: requires jQuery v1.9.1+, Bootstrap, Bootstrap’s dropdown.js component, and Bootstrap's CSS
Compatibility: Unsure, but bootstrap says it "supports the latest, stable releases of all major browsers and platforms"
Demo: https://developer.snapappointments.com/bootstrap-select/examples/
.special {_x000D_
font-weight: bold !important;_x000D_
color: #fff !important;_x000D_
background: #bc0000 !important;_x000D_
text-transform: uppercase;_x000D_
}
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>_x000D_
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />_x000D_
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css" rel="stylesheet" />_x000D_
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>_x000D_
_x000D_
<select class="selectpicker">_x000D_
<option>Mustard</option>_x000D_
<option class="special">Ketchup</option>_x000D_
<option style="background: #5cb85c; color: #fff;">Relish</option>_x000D_
</select>
_x000D_
There's a library you can use called Select2.
Dependencies: Library is JS + CSS + HTML only (does not require JQuery).
Compatibility: IE 8+, Chrome 8+, Firefox 10+, Safari 3+, Opera 10.6+
Demo: https://select2.org/getting-started/basic-usage
There's also a bootstrap theme available.
No Bootstrap example:
$(function() {_x000D_
var $select = $('.select2');_x000D_
_x000D_
$select.select2({_x000D_
theme: 'paper'_x000D_
});_x000D_
});
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>_x000D_
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>_x000D_
_x000D_
<select class="select2 form-control" placeholder="Country">_x000D_
<optgroup label="Alaskan/Hawaiian Time Zone">_x000D_
<option value="AK">Alaska</option>_x000D_
<option value="HI">Hawaii</option>_x000D_
</optgroup>_x000D_
<optgroup label="Pacific Time Zone">_x000D_
<option value="CA">California</option>_x000D_
<option value="NV">Nevada</option>_x000D_
<option value="OR">Oregon</option>_x000D_
<option value="WA">Washington</option>_x000D_
</optgroup>_x000D_
</select>
_x000D_
Bootstrap example:
$(function() {_x000D_
var $select = $('.select2');_x000D_
_x000D_
$select.select2({_x000D_
theme: 'paper'_x000D_
});_x000D_
});
_x000D_
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.2/paper/bootstrap.css" rel="stylesheet"/>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>_x000D_
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"/>_x000D_
_x000D_
<select class="select2 form-control" placeholder="Country">_x000D_
<optgroup label="Alaskan/Hawaiian Time Zone">_x000D_
<option value="AK">Alaska</option>_x000D_
<option value="HI">Hawaii</option>_x000D_
</optgroup>_x000D_
<optgroup label="Pacific Time Zone">_x000D_
<option value="CA">California</option>_x000D_
<option value="NV">Nevada</option>_x000D_
<option value="OR">Oregon</option>_x000D_
<option value="WA">Washington</option>_x000D_
</optgroup>_x000D_
</select>
_x000D_
If you have extra money, you can use a premium library MDBootstrap. (This is an entire UI Kit, so it's not light)
This allows you to style your select and option elements using the Material design.
There is a free version, but it won't allow you to use the pretty Material design!
Dependencies: Bootstrap 4, JQuery,
Compatibility: "supports the latest, stable releases of all major browsers and platforms."
Demo: https://mdbootstrap.com/docs/jquery/forms/select/#color
As already mentioned, the only way is to use a plugin that replaces <select>
functionality.
A list of jQuery plugins: http://plugins.jquery.com/tag/select/
Take a look at the example using Select2
plugin: http://jsfiddle.net/swsLokfj/23/
Seems like I can just set the CSS for the select
in Chrome directly. CSS and HTML code provided below :
.boldoption {_x000D_
font-weight: bold;_x000D_
}
_x000D_
<select>_x000D_
<option>Some normal-font option</option>_x000D_
<option>Another normal-font option</option>_x000D_
<option class="boldoption">Some bold option</option>_x000D_
</select>
_x000D_
It's 2017 and it IS possible to target specific select options. In my project I have a table with a class="variations", and the select options are in the table cell td="value", and the select has an ID select#pa_color. The option element also has a class option="attached" (among other class tags). If a user is logged in as a wholesale customer, they can see all of the color options. But retail customers are not allowed to purchase 2 color options, so I've disabled them
<option class="attached" disabled>color 1</option>
<option class="attached" disabled>color 2</option>
It took a little logic, but here is how I targeted the disabled select options.
CSS
table.variations td.value select#pa_color option.attached:disabled {
display: none !important;
}
With that, my color options are only visible to wholesale customers.
You can style the option elements to some extent.
Using the * CSS tag you can style the options inside the box that is drawn by the system.
Example:
#ddlProducts *
{
border-radius:15px;
background-color:red;
}
That will look like this:
Is this what youre looking for? I did it with jQuery!
Run Code Snippet
$(".custom-select").each(function() {
var classes = $(this).attr("class"),
id = $(this).attr("id"),
name = $(this).attr("name");
var template = '<div class="' + classes + '">';
template += '<span class="custom-select-trigger">' + $(this).attr("placeholder") + '</span>';
template += '<div class="custom-options">';
$(this).find("option").each(function() {
template += '<span class="custom-option ' + $(this).attr("class") + '" data-value="' + $(this).attr("value") + '">' + $(this).html() + '</span>';
});
template += '</div></div>';
$(this).wrap('<div class="custom-select-wrapper"></div>');
$(this).hide();
$(this).after(template);
});
$(".custom-option:first-of-type").hover(function() {
$(this).parents(".custom-options").addClass("option-hover");
}, function() {
$(this).parents(".custom-options").removeClass("option-hover");
});
$(".custom-select-trigger").on("click", function() {
$('html').one('click',function() {
$(".custom-select").removeClass("opened");
});
$(this).parents(".custom-select").toggleClass("opened");
event.stopPropagation();
});
$(".custom-option").on("click", function() {
$(this).parents(".custom-select-wrapper").find("select").val($(this).data("value"));
$(this).parents(".custom-options").find(".custom-option").removeClass("selection");
$(this).addClass("selection");
$(this).parents(".custom-select").removeClass("opened");
$(this).parents(".custom-select").find(".custom-select-trigger").text($(this).text());
});
_x000D_
body {
font-family: 'Roboto', sans-serif;
}
.custom-select-wrapper {
position: relative;
display: inline-block;
user-select: none;
}
.custom-select-wrapper select {
display: none;
}
.custom-select {
position: relative;
display: inline-block;
}
.custom-select-trigger {
position: relative;
display: block;
width: 170px;
padding: 0 84px 0 22px;
font-size: 19px;
font-weight: 300;
color: #5f5f5f;
line-height: 50px;
background: #EAEAEA;
border-radius: 4px;
cursor: pointer;
margin-left:20px;
border: 1px solid #5f5f5f;
transition: all 0.3s;
}
.custom-select-trigger:hover {
background-color: #d9d9d9;
transition: all 0.3s;
}
.custom-select-trigger:after {
position: absolute;
display: block;
content: '';
width: 10px; height: 10px;
top: 50%; right: 25px;
margin-top: -3px;
border-bottom: 1px solid #5f5f5f;
border-right: 1px solid #5f5f5f;
transform: rotate(45deg) translateY(-50%);
transition: all 0.4s ease-in-out;
transform-origin: 50% 0;
}
.custom-select.opened .custom-select-trigger:after {
margin-top: 3px;
transform: rotate(-135deg) translateY(-50%);
}
.custom-options {
position: absolute;
display: block;
top: 100%; left: 0; right: 0;
margin: 15px 0;
border: 1px solid #b5b5b5;
border-radius: 4px;
box-sizing: border-box;
box-shadow: 0 2px 1px rgba(0,0,0,.07);
background: #fff;
transition: all 0.4s ease-in-out;
margin-left: 20px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-15px);
}
.custom-select.opened .custom-options {
opacity: 1;
visibility: visible;
pointer-events: all;
transform: translateY(0);
}
.custom-options:before {
position: absolute;
display: block;
content: '';
bottom: 100%; right: 25px;
width: 7px; height: 7px;
margin-bottom: -4px;
border-top: 1px solid #b5b5b5;
border-left: 1px solid #b5b5b5;
background: #fff;
transform: rotate(45deg);
transition: all 0.4s ease-in-out;
}
.option-hover:before {
background: #f9f9f9;
}
.custom-option {
position: relative;
display: block;
padding: 0 22px;
border-bottom: 1px solid #b5b5b5;
font-size: 18px;
font-weight: 600;
color: #b5b5b5;
line-height: 47px;
cursor: pointer;
transition: all 0.15s ease-in-out;
}
.custom-option:first-of-type {
border-radius: 4px 4px 0 0;
}
.custom-option:last-of-type {
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
.custom-option:hover,
.custom-option.selection {
background: #f2f0f0;
}
_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="sources" id="sources" class="custom-select sources" placeholder="My Categories">
<option value="categoryOne">Category 1</option>
<option value="categoryTwo">Category 2</option>
<option value="categoryThree">Category 3</option>
<option value="categoryFour">Category 4</option>
</select>
_x000D_
I found and using this good example of styling the selects and options.You can do with this select all you want.Here is the Fiddle
html
<select id="selectbox1">
<option value="">Select an option…</option>
<option value="aye">Aye</option>
<option value="eh">Eh</option>
<option value="ooh">Ooh</option>
<option value="whoop">Whoop</option>
</select>
<select id="selectbox2">
<option value="">Month…</option>
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
css
body {
padding:50px;
background-color:white;
}
.s-hidden {
visibility:hidden;
padding-right:10px;
}
.select {
cursor:pointer;
display:inline-block;
position:relative;
font:normal 11px/22px Arial, Sans-Serif;
color:black;
border:1px solid #ccc;
}
.styledSelect {
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:white;
padding:0 10px;
font-weight:bold;
}
.styledSelect:after {
content:"";
width:0;
height:0;
border:5px solid transparent;
border-color:black transparent transparent transparent;
position:absolute;
top:9px;
right:6px;
}
.styledSelect:active, .styledSelect.active {
background-color:#eee;
}
.options {
display:none;
position:absolute;
top:100%;
right:0;
left:0;
z-index:999;
margin:0 0;
padding:0 0;
list-style:none;
border:1px solid #ccc;
background-color:white;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
}
.options li {
padding:0 6px;
margin:0 0;
padding:0 10px;
}
.options li:hover {
background-color:#39f;
color:white;
}
JS
// Iterate over each select element
$('select').each(function () {
// Cache the number of options
var $this = $(this),
numberOfOptions = $(this).children('option').length;
// Hides the select element
$this.addClass('s-hidden');
// Wrap the select element in a div
$this.wrap('<div class="select"></div>');
// Insert a styled div to sit over the top of the hidden select element
$this.after('<div class="styledSelect"></div>');
// Cache the styled div
var $styledSelect = $this.next('div.styledSelect');
// Show the first select option in the styled div
$styledSelect.text($this.children('option').eq(0).text());
// Insert an unordered list after the styled div and also cache the list
var $list = $('<ul />', {
'class': 'options'
}).insertAfter($styledSelect);
// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
text: $this.children('option').eq(i).text(),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
// Cache the list items
var $listItems = $list.children('li');
// Show the unordered list when the styled div is clicked (also hides it if the div is clicked again)
$styledSelect.click(function (e) {
e.stopPropagation();
$('div.styledSelect.active').each(function () {
$(this).removeClass('active').next('ul.options').hide();
});
$(this).toggleClass('active').next('ul.options').toggle();
});
// Hides the unordered list when a list item is clicked and updates the styled div to show the selected list item
// Updates the select element to have the value of the equivalent option
$listItems.click(function (e) {
e.stopPropagation();
$styledSelect.text($(this).text()).removeClass('active');
$this.val($(this).attr('rel'));
$list.hide();
/* alert($this.val()); Uncomment this for demonstration! */
});
// Hides the unordered list when clicking outside of it
$(document).click(function () {
$styledSelect.removeClass('active');
$list.hide();
});
});
Even if there aren't much properties to change, but you can achieve following style only with css:
.options {
border: 1px solid #e5e5e5;
padding: 10px;
}
select {
font-size: 14px;
border: none;
width: 100%;
background: white;
}
_x000D_
<div class="options">
<select>
<option value="">Apple</option>
<option value="">Banana</option>
<option value="">Orange</option>
<option value="">Mango</option>
</select>
</div>
_x000D_
Actually you can add :before and :after and style those. At least it's something
option {
font-size: 18px;
background-color: #ffffff;
}
option:before {
content: ">";
font-size: 20px;
display: none;
padding-right: 10px;
padding-left: 5px;
color: #fff;
}
option:hover:before {
display: inline;
}
_x000D_
<select id="ddlProducts" name="ddProducts">
<option>Product1 : Electronics </option>
<option>Product2 : Sports </option>
</select>
_x000D_
It's will definitely work.
The select option is rendered by OS not by html. That's whythe CSS style doesn't effect,.. generally
option{font-size : value ;
background-color:colorCode;
border-radius:value; }
this will work, but we can't customize the padding, margin etc..
Below code 100% work to customize select tag taken from this example
var x, i, j, selElmnt, a, b, c;_x000D_
/*look for any elements with the class "custom-select":*/_x000D_
x = document.getElementsByClassName("custom-select");_x000D_
for (i = 0; i < x.length; i++) {_x000D_
selElmnt = x[i].getElementsByTagName("select")[0];_x000D_
/*for each element, create a new DIV that will act as the selected item:*/_x000D_
a = document.createElement("DIV");_x000D_
a.setAttribute("class", "select-selected");_x000D_
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;_x000D_
x[i].appendChild(a);_x000D_
/*for each element, create a new DIV that will contain the option list:*/_x000D_
b = document.createElement("DIV");_x000D_
b.setAttribute("class", "select-items select-hide");_x000D_
for (j = 1; j < selElmnt.length; j++) {_x000D_
/*for each option in the original select element,_x000D_
create a new DIV that will act as an option item:*/_x000D_
c = document.createElement("DIV");_x000D_
c.innerHTML = selElmnt.options[j].innerHTML;_x000D_
c.addEventListener("click", function(e) {_x000D_
/*when an item is clicked, update the original select box,_x000D_
and the selected item:*/_x000D_
var y, i, k, s, h;_x000D_
s = this.parentNode.parentNode.getElementsByTagName("select")[0];_x000D_
h = this.parentNode.previousSibling;_x000D_
for (i = 0; i < s.length; i++) {_x000D_
if (s.options[i].innerHTML == this.innerHTML) {_x000D_
s.selectedIndex = i;_x000D_
h.innerHTML = this.innerHTML;_x000D_
y = this.parentNode.getElementsByClassName("same-as-selected");_x000D_
for (k = 0; k < y.length; k++) {_x000D_
y[k].removeAttribute("class");_x000D_
}_x000D_
this.setAttribute("class", "same-as-selected");_x000D_
break;_x000D_
}_x000D_
}_x000D_
h.click();_x000D_
});_x000D_
b.appendChild(c);_x000D_
}_x000D_
x[i].appendChild(b);_x000D_
a.addEventListener("click", function(e) {_x000D_
/*when the select box is clicked, close any other select boxes,_x000D_
and open/close the current select box:*/_x000D_
e.stopPropagation();_x000D_
closeAllSelect(this);_x000D_
this.nextSibling.classList.toggle("select-hide");_x000D_
this.classList.toggle("select-arrow-active");_x000D_
});_x000D_
}_x000D_
function closeAllSelect(elmnt) {_x000D_
/*a function that will close all select boxes in the document,_x000D_
except the current select box:*/_x000D_
var x, y, i, arrNo = [];_x000D_
x = document.getElementsByClassName("select-items");_x000D_
y = document.getElementsByClassName("select-selected");_x000D_
for (i = 0; i < y.length; i++) {_x000D_
if (elmnt == y[i]) {_x000D_
arrNo.push(i)_x000D_
} else {_x000D_
y[i].classList.remove("select-arrow-active");_x000D_
}_x000D_
}_x000D_
for (i = 0; i < x.length; i++) {_x000D_
if (arrNo.indexOf(i)) {_x000D_
x[i].classList.add("select-hide");_x000D_
}_x000D_
}_x000D_
}_x000D_
/*if the user clicks anywhere outside the select box,_x000D_
then close all select boxes:*/_x000D_
document.addEventListener("click", closeAllSelect);
_x000D_
/*the container must be positioned relative:*/_x000D_
.custom-select {_x000D_
position: relative;_x000D_
font-family: Arial;_x000D_
}_x000D_
.custom-select select {_x000D_
display: none; /*hide original SELECT element:*/_x000D_
}_x000D_
.select-selected {_x000D_
background-color: DodgerBlue;_x000D_
}_x000D_
/*style the arrow inside the select element:*/_x000D_
.select-selected:after {_x000D_
position: absolute;_x000D_
content: "";_x000D_
top: 14px;_x000D_
right: 10px;_x000D_
width: 0;_x000D_
height: 0;_x000D_
border: 6px solid transparent;_x000D_
border-color: #fff transparent transparent transparent;_x000D_
}_x000D_
/*point the arrow upwards when the select box is open (active):*/_x000D_
.select-selected.select-arrow-active:after {_x000D_
border-color: transparent transparent #fff transparent;_x000D_
top: 7px;_x000D_
}_x000D_
/*style the items (options), including the selected item:*/_x000D_
.select-items div,.select-selected {_x000D_
color: #ffffff;_x000D_
padding: 8px 16px;_x000D_
border: 1px solid transparent;_x000D_
border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;_x000D_
cursor: pointer;_x000D_
}_x000D_
/*style items (options):*/_x000D_
.select-items {_x000D_
position: absolute;_x000D_
background-color: DodgerBlue;_x000D_
top: 100%;_x000D_
left: 0;_x000D_
right: 0;_x000D_
z-index: 99;_x000D_
}_x000D_
/*hide the items when the select box is closed:*/_x000D_
.select-hide {_x000D_
display: none;_x000D_
}_x000D_
.select-items div:hover, .same-as-selected {_x000D_
background-color: rgba(0, 0, 0, 0.1);_x000D_
}
_x000D_
<div class="custom-select" style="width:200px;">_x000D_
<select>_x000D_
<option value="0">Select car:</option>_x000D_
<option value="1">Audi</option>_x000D_
<option value="2">BMW</option>_x000D_
<option value="3">Citroen</option>_x000D_
<option value="4">Ford</option>_x000D_
<option value="5">Honda</option>_x000D_
<option value="6">Jaguar</option>_x000D_
<option value="7">Land Rover</option>_x000D_
<option value="8">Mercedes</option>_x000D_
<option value="9">Mini</option>_x000D_
<option value="10">Nissan</option>_x000D_
<option value="11">Toyota</option>_x000D_
<option value="12">Volvo</option>_x000D_
</select>_x000D_
</div>
_x000D_
You can use inline styles to add custome styling to <option>
tags.
For eg : <option style="font-weight:bold;color:#09C;">Option 1</option>
This will apply the styles to this particular <option>
element only.
Then you can use a bit of javascript magic to apply the inline styles to all of the <option>
elements within a <select>
tag like so :
var select = $(document).getElementById('#select-element-id')
var option = select.children('#option-element-id')
option.css('font-weight', 'bold')
option.css('font-size', '24px')
You can also use <option value="" disabled> <br> </option>
to add a line-break between the options.
Leaving here a quick alternative, using class toggle on a table. The behavior is very similar than a select, but can be styled with transition, filters and colors, each children individually.
function toggleSelect(){ _x000D_
if (store.classList[0] === "hidden"){_x000D_
store.classList = "viewfull"_x000D_
}_x000D_
else {_x000D_
store.classList = "hidden"_x000D_
}_x000D_
}
_x000D_
#store {_x000D_
overflow-y: scroll;_x000D_
max-height: 110px;_x000D_
max-width: 50%_x000D_
}_x000D_
_x000D_
.hidden {_x000D_
display: none_x000D_
}_x000D_
_x000D_
.viewfull {_x000D_
display: block_x000D_
}_x000D_
_x000D_
#store :nth-child(4) {_x000D_
background-color: lime;_x000D_
}_x000D_
_x000D_
span {font-size:2rem;cursor:pointer}
_x000D_
<span onclick="toggleSelect()">?</span>_x000D_
<div id="store" class="hidden">_x000D_
_x000D_
<ul><li><a href="#keylogger">keylogger</a></li><li><a href="#1526269343113">1526269343113</a></li><li><a href="#slow">slow</a></li><li><a href="#slow2">slow2</a></li><li><a href="#Benchmark">Benchmark</a></li><li><a href="#modal">modal</a></li><li><a href="#buma">buma</a></li><li><a href="#1526099371108">1526099371108</a></li><a href="#1526099371108o">1526099371108o</a></li><li><a href="#pwnClrB">pwnClrB</a></li><li><a href="#stars%20u">stars%20u</a></li><li><a href="#pwnClrC">pwnClrC</a></li><li><a href="#stars ">stars </a></li><li><a href="#wello">wello</a></li><li><a href="#equalizer">equalizer</a></li><li><a href="#pwnClrA">pwnClrA</a></li></ul>_x000D_
_x000D_
</div>
_x000D_
No, it's not possible, as the styling for these elements is handled by the user's OS. MSDN will answer your question here:
Except for
background-color
andcolor
, style settings applied through the style object for the option element are ignored.
Some properties can be styled for<option>
tag:
font-family
color
font-*
background-color
Also you can use custom font for individual <option>
tag, for example any google font, Material Icons or other icon fonts from icomoon or alike. (That may come handy for font selectors etc.)
Considering that, you can create font-family stack and insert icons in <option>
tags, eg.
<select>
<option style="font-family: 'Icons', 'Roboto', sans-serif;">a ???</option>
<option style="font-family: 'Icons', 'Roboto', sans-serif;">b ????</option>
</select>
where ?
is taken from Icons
and the rest is from Roboto
.
Note though that custom fonts do not work for mobile select.
Bootstrap allows you to use styling via data-content:
<select class="selectpicker">
<option data-content="<span class='label label-success'>Relish</span>">Relish</option>
</select>
Example: https://silviomoreto.github.io/bootstrap-select/examples/
This element is rendered by the OS, not HTML. It cannot be styled via CSS.
$(function() {_x000D_
var clicky;_x000D_
var t=0;_x000D_
$(document).mousedown(function(e) {_x000D_
clicky = $(e.target);_x000D_
});_x000D_
$(document).mouseup(function(e) {_x000D_
clicky = null;_x000D_
});_x000D_
_x000D_
$("select").focusout(function(e) {_x000D_
if (typeof clicky.attr('id') !== typeof undefined && clicky.attr('id') !== false) {_x000D_
$(this).parents().children("span.selected").html(clicky.html());_x000D_
$(this).children('option[value="'+clicky.attr('id')+'"]').prop('selected', true);_x000D_
}_x000D_
_x000D_
$(this).parents().children("span.lists").html('');_x000D_
_x000D_
_x000D_
});_x000D_
$('select > option').text(function(i, text) {_x000D_
var attr = $(this).attr('selected');_x000D_
if (typeof attr !== typeof undefined && attr !== false) {_x000D_
$(this).parents().parents().children("span.selected").html(text);_x000D_
}_x000D_
});_x000D_
_x000D_
$("select").focusin(function(){_x000D_
$(this).children('option').text(function(i, text) {_x000D_
$(this).parents().children("span.lists").append("<span class='item' id='"+$(this).attr('value')+"'>"+text+"</span>");_x000D_
});_x000D_
});_x000D_
_x000D_
});
_x000D_
select {_x000D_
width: 0px;_x000D_
height: 0px;_x000D_
overflow:hidden;_x000D_
outline: none;_x000D_
border: none;_x000D_
appearance:none;_x000D_
-moz-appearance: none;_x000D_
_x000D_
}_x000D_
label{_x000D_
display: inline-block;_x000D_
padding: 5px 10px;_x000D_
position: relative;_x000D_
width: 100px;_x000D_
height: 20px;_x000D_
background-color:#ccc;_x000D_
_x000D_
}_x000D_
label .selected{_x000D_
display: inline-block;_x000D_
overflow: hidden;_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
}_x000D_
label span.lists{_x000D_
width: 100%;_x000D_
display: inline-block;_x000D_
position: absolute;_x000D_
top: 100%;_x000D_
left: 0px;_x000D_
box-shadow: 0px 0px 2px 0px #ccc;_x000D_
background-color:#fff;_x000D_
z-index: 9;_x000D_
}_x000D_
label span.item{_x000D_
display: inline-block;_x000D_
width: 100%;_x000D_
border-bottom: 1px solid #ccc;_x000D_
}
_x000D_
<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
<meta charset="UTF-8">_x000D_
<title>Document</title>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
</head>_x000D_
<body>_x000D_
<form action="?" method="GET">_x000D_
<label><span class="selected">select..</span> <span class="lists"></span>_x000D_
<select name="test">_x000D_
<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>_x000D_
<option value="2" selected>item 2</option>_x000D_
<option value="3">item 3</option>_x000D_
<option value="4">item 4</option>_x000D_
</select>_x000D_
</label><br>_x000D_
<label><span class="selected">select..</span> <span class="lists"></span>_x000D_
<select name="test2">_x000D_
<option value="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</option>_x000D_
<option value="2">item 2</option>_x000D_
<option value="3" selected>item 3</option>_x000D_
<option value="4">item 4</option>_x000D_
</select>_x000D_
</label><br>_x000D_
<button>Submit</button>_x000D_
</form>_x000D_
_x000D_
</body>_x000D_
</html>
_x000D_
try this it may help you
[ https://codepen.io/venu9l/pen/jeNXzY][1]
You can add a class and gives font-weight:700; in option. But by using this all the text will become bold.
Source: Stackoverflow.com