The answer is
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 element creates a grouping of options within a element. (Source: MDN Web Docs:
<optgroup>)
<select>
<optgroup label="Australia" default selected>
<option value="sydney">Sydney</option>
<option value="melbourne">Melbourne</option>
</optgroup>
<optgroup label="United Kingdom">
<option value="london">London</option>
<option value="glasgow">Glasgow</option>
</optgroup>
</select>Unfortunately, only one <optgroup /> level is allowed and currently supported by browsers today. (Source: w3.org.) Personally, I would consider that part of the spec broken, but you can always extend to third, fourth, etc., levels of indentation with using the trick up above.
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'));
}
This simple hack will indent the text. Works well.
select {
text-indent: 5px;
}
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;
}
You can use font-size property for option if you need.
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.
Simply set height of the select tag
select{
height: 30px;
max-height: 30px;
}
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>It seems that
Unfortunately, webkit browsers do not support styling of option tags yet.
you may find similar question here
- How to style a select tag's option element?
- 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!
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/
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));
No Jquery - No Third party js file
function clickComboBox(){_x000D_
comboOpt = document.getElementsByClassName("opt");_x000D_
for (i = 0; i < comboOpt.length; i++) {_x000D_
if (comboOpt[i].style.display === "block") {_x000D_
comboOpt[i].style.display = "none";_x000D_
} else {_x000D_
comboOpt[i].style.display = "block";_x000D_
}_x000D_
} _x000D_
}_x000D_
function clickOpt(value1,text1){_x000D_
document.getElementById("selectedValue").value=value1;_x000D_
document.getElementById("customComboBox").innerHTML=text1;_x000D_
clickComboBox();_x000D_
}#customComboBox{_x000D_
width: 150px;_x000D_
height: 20px;_x000D_
border: 1px solid #CCCCCC;_x000D_
display: block;_x000D_
padding: 2px 5px;_x000D_
}_x000D_
.opt{_x000D_
padding: 5px 0px;background-color:#CCCCCC;_x000D_
width: 160px;_x000D_
display: none;_x000D_
}<div id="customComboBox" onClick="clickComboBox()">_x000D_
-Select Value-_x000D_
</div>_x000D_
<input type="hidden" id="selectedValue">_x000D_
<div class="opt">_x000D_
<div onClick="clickOpt('01','Test1')"><img src="https://pasteboard.co/J6940Vs.png" height="20">Test1</div>_x000D_
<div style="padding-left:10px;" onClick="clickOpt('02','Test2')">Test2</div>_x000D_
<div onClick="clickOpt('03','Test3')">Test3</div>_x000D_
</div>smart code - use jquery
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
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");
});
});
Source: Stackoverflow.com