Select option padding not working in chrome

Question

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>

Answer 1

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/

Answer 2

This simple hack will indent the text. Works well.

select {
  text-indent: 5px;
}

Answer 3

It seems that

Unfortunately, webkit browsers do not support styling of option tags yet.

you may find similar question here

1. How to style a select tag's option element?
2. 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!

Answer 4

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));

Answer 5

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>

Answer 6

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">
&nbsp
    <li>Test</li>
    <li>Test 2</li>
    <li>Test 3</li>
</ul>

Script:

$(document).ready(function(){
    $("#customComboBox").click(function(){
        $("li").toggle("slow");
    });
});

DEMO

Answer 7

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;
}

Answer 8

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">&nbsp;&nbsp;&nbsp;&nbsp;Sydney</option>
    <option value="melbourne" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Melbourne</option>
    <option value="cromwell" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;Cromwell</option>
    <option value="queenstown" class="optionChild">&nbsp;&nbsp;&nbsp;&nbsp;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.

Answer 9

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'));
}

Answer 10

Hey guy the easy way to give option text padding from let just use   like check below

<option value="<?= $subc->gc_id ?>">&nbsp;&nbsp;&nbsp;<?php echo $subc->gc_title; ?> 
</option>

hope everyone enjoys this

Answer 11

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

Answer 12

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>

Answer 13

For vertical padding you can use line-height. If you don't need border, you can specify border and make it the same color as the select element background, it will give you padding appearance.

box-shadow can be used to add stroke to the element if really needed.

select {
  background-color: #555;
  border: 10px solid #555;
  border-width: 15px 15px 15px 20px;
  border-radius: 30px;
  cursor: pointer;
  color: white;
}

<select>
  <option>Snake</option>
  <option>Squirrel</option>
  <option>Sheep</option>
  <option>Owl</option>
</select>

Answer 14

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>

Answer 15

You can use font-size property for option if you need.

Answer 16

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.