Select option padding not working in chrome
HtmlCssHtml Problem Overview
Select option padding not working in chrome
<style>
select option { padding:5px 0px; }
</style>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
Html Solutions
Solution 1 - Html
I just found a way to get padding applied to the select input in chrome
select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 5px;
}
Seems to work in the current chrome 39.0.2171.71 (64-bit) and safari (I only tested this on a mac).
This seems to remove the default styling added to the select input (it also removed the drop down arrow), but allows you to then use your own styling without chrome overriding it.
I stumbled across this fix while using code from here: http://fettblog.eu/style-select-elements/
Solution 2 - Html
This simple hack will indent the text. Works well.
select {
text-indent: 5px;
}
Solution 3 - Html
It seems that
Unfortunately, webkit browsers do not support styling of option tags yet.
you may find similar question here
- https://stackoverflow.com/questions/5887133/cssselect-dropdown-option
- https://stackoverflow.com/questions/12301729/styling-option-value-in-select-drop-down-html-not-work-on-chrome-safari
The most widely used cross browser solution is to use ul li
Hope it helps!
Solution 4 - Html
I fixed it with this
select {
max-height: calc(1.2em + 24px);
height: calc(1.2em + 24px);
}
max-height: calc(your line height + (top + bottom padding));
height: calc(your line height + (top + bottom padding));
Solution 5 - Html
Very, VERY simple idea, but you can modify it accordingly. This isn't set up to look good, only to provide the idea. Hope it helps.
CSS:
ul {
width: 50px;
height: 20px;
border: 1px solid black;
display: block;
}
li {
padding: 5px 0px;
width: 50px;
display: none;
}
HTML:
<ul id="customComboBox">
 
<li>Test</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
Script:
$(document).ready(function(){
$("#customComboBox").click(function(){
$("li").toggle("slow");
});
});
Solution 6 - Html
That's not work on optionentry because it's a "system" generated drop-down menu but you can set the padding of a select.
Just reset the box-sizing property to content-box in your CSS.
The default value of select is border-box.
select {
box-sizing: content-box;
padding: 5px 0;
}
Solution 7 - Html
Not padding but if your goal is to simply make it larger, you can increase the font-size. And using it with font-size-adjust reduces the font-size back to normal on select and not on options, so it ends up making the option larger.
Not sure if it works on all browsers, or will keep working in current.
Tested on Chrome 85 & Firefox 81.
select {
font-size: 2em;
font-size-adjust: 0.3;
}
<label>
Select: <select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</label>
Solution 8 - Html
I have a little trick for your problem. But for that you must use javascript. If you detected that the browser is Chrome insert "dummy" options between every options. Give a new class for those "dummy" options and make them disabled. The height of "dummy" options you can define with font-size property.
CSS:
option.dummy-option-for-chrome {
font-size:2px;
color:transparent;
}
Script:
function prepareHtml5Selects() {
var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );
if(!is_chrome) return;
$('select > option').each(function() {
$('<option class="dummy-option-for-chrome" disabled></option>')
.insertBefore($(this));
});
$('<option class="dummy-option-for-chrome" disabled></option>')
.insertAfter($('select > option:last-child'));
}
Solution 9 - Html
Arbitrary Indentation of any Option
If you just want to indent random, arbitrary <option /> elements, you can use , which has the greatest cross-browser compatibility of the solutions posted here...
.optionGroup {
font-weight: bold;
font-style: italic;
}
<select>
<option class="optionGroup" selected disabled>Choose one</option>
<option value="sydney" class="optionChild"> Sydney</option>
<option value="melbourne" class="optionChild"> Melbourne</option>
<option value="cromwell" class="optionChild"> Cromwell</option>
<option value="queenstown" class="optionChild"> Queenstown</option>
</select>
Ordered Indentation of Options
But if you have some sorted, ordered structure to your data, then it is recommended that you use the <optgroup/> syntax....
> The HTML
Solution 10 - Html
No Jquery - No Third party js file
function clickComboBox(){
comboOpt = document.getElementsByClassName("opt");
for (i = 0; i < comboOpt.length; i++) {
if (comboOpt[i].style.display === "block") {
comboOpt[i].style.display = "none";
} else {
comboOpt[i].style.display = "block";
}
}
}
function clickOpt(value1,text1){
document.getElementById("selectedValue").value=value1;
document.getElementById("customComboBox").innerHTML=text1;
clickComboBox();
}
#customComboBox{
width: 150px;
height: 20px;
border: 1px solid #CCCCCC;
display: block;
padding: 2px 5px;
}
.opt{
padding: 5px 0px;background-color:#CCCCCC;
width: 160px;
display: none;
}
<div id="customComboBox" onClick="clickComboBox()">
-Select Value-
</div>
<input type="hidden" id="selectedValue">
<div class="opt">
<div onClick="clickOpt('01','Test1')"><img src="https://pasteboard.co/J6940Vs.png" height="20">Test1</div>
<div style="padding-left:10px;" onClick="clickOpt('02','Test2')">Test2</div>
<div onClick="clickOpt('03','Test3')">Test3</div>
</div>
smart code - use jquery
Solution 11 - Html
Hey guy the easy way to give option text padding from let just use like check below
<option value="<?= $subc->gc_id ?>"> <?php echo $subc->gc_title; ?>
</option>
hope everyone enjoys this
Solution 12 - Html
Also it is possible to insert empty groups to get margins.
<select>
<optgroup></optgroup>
<option>Special</option>
<optgroup></optgroup>
<option selected>First</option>
<option>Second</option>
<option>Third</option>
<optgroup></optgroup>
<option>Extra</option>
</select>
Solution 13 - Html
Update 2022 - I know this answer is late, it works on different browsers, by manipulating in the margin, indent and padding.
Hope it works!
<style>
select {
margin: 6px;
font: 16px Arial;
}
select {
width: 262px;
height: 32px;
padding: 4px;
line-height: 32px;
text-indent: 4px;
cursor: pointer;
}
</style>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
Solution 14 - Html
You can use font-size property for option if you need.
Solution 15 - Html
You should be targeting select for your CSS instead of select option.
select {
padding: 10px;
margin: 0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
View this article Styling Select Box with CSS3 for more styling options.