How to style HTML select/option tag?
40,717
Solution 1
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>
Solution 2
Disabling the default setting can enable you a little more freedom - give your select a class, within that class use the following:
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
and then add in your default style
Author by
gen
Updated on July 09, 2022Comments
-
gen almost 2 years
I would like to create a dropdown menu with html select thus I would like to style it as well. I would like to set a padding to the option tags so they wouldn't be so overcrowded, but I can't do so. (it doesn't work) any idea?
#categories { padding: 10px 10px 10px 10px; background-color: #826B78; font-size: 20px; color: white; margin: 10px 10px 10px 10px; border: none; outline: none; } #categories option { margin: 30px 30px 30px 30px; padding: 30px 30px 30px 30px; font-size: 20px; }
the categories id belongs to the select tag
-
gen almost 11 yearsi am not allowed to use jquery, isnt it possible with javascript?
-
Sunil D. almost 10 yearsNote that comment that you're quoting seems to be specifically for using the
select
tag with Bootstrap's.inputGroup
class.