Select option padding not working in chrome

Question

Select option padding not working in chrome   lt style gt  select option   padding 5px 0px     lt  style gt       lt select gt   lt option gt 1 lt  option gt   lt option gt 2 lt  option gt   lt option gt 3 lt  option gt    lt  select gt

User · Answer

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.

User · Answer

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  gt  option   each function             lt option class  dummy-option-for-chrome  disabled gt  lt  option gt          insertBefore   this                lt option class  dummy-option-for-chrome  disabled gt  lt  option gt         insertAfter    select  gt  option last-child

User · Answer

No Jquery - No Third party js file   x000D   x000D  function clickComboBox    x000D    comboOpt   document getElementsByClassName  opt    x000D    for  i   0  i  lt  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    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    x000D   lt div id  customComboBox   onClick  clickComboBox    gt  x000D  -Select Value- x000D   lt  div gt  x000D   lt input type  hidden  id  selectedValue  gt  x000D     lt div class  opt  gt  x000D     lt div onClick  clickOpt  01   Test1    gt  lt img  src  https   pasteboard co J6940Vs png  height  20  gt Test1 lt  div gt  x000D     lt div style  padding-left 10px   onClick  clickOpt  02   Test2    gt Test2 lt  div gt  x000D     lt div onClick  clickOpt  03   Test3    gt Test3 lt  div gt  x000D     lt  div gt  x000D   x000D   x000D    smart code - use jquery

User · Answer

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

User · Answer

Arbitrary Indentation of any Option If you just want to indent random  arbitrary  lt option   gt  elements  you can use  amp nbsp   which has the greatest cross-browser compatibility of the solutions posted here     x000D   x000D   optionGroup     font-weight  bold    font-style  italic    x000D   lt select gt       lt option class  optionGroup  selected disabled gt Choose one lt  option gt       lt option value  sydney  class  optionChild  gt  amp nbsp  amp nbsp  amp nbsp  amp nbsp Sydney lt  option gt       lt option value  melbourne  class  optionChild  gt  amp nbsp  amp nbsp  amp nbsp  amp nbsp Melbourne lt  option gt       lt option value  cromwell  class  optionChild  gt  amp nbsp  amp nbsp  amp nbsp  amp nbsp Cromwell lt  option gt       lt option value  queenstown  class  optionChild  gt  amp nbsp  amp nbsp  amp nbsp  amp nbsp Queenstown lt  option gt   lt  select gt  x000D   x000D   x000D   Ordered Indentation of Options But if you have some sorted  ordered structure to your data  then it is recommended that you use the  lt optgroup  gt  syntax      The HTML  element creates a grouping of options within a  element   Source  MDN Web Docs   lt optgroup gt     x000D   x000D   lt select gt       lt optgroup label  Australia  default selected gt           lt option value  sydney  gt Sydney lt  option gt           lt option value  melbourne  gt Melbourne lt  option gt       lt  optgroup gt       lt optgroup label  United Kingdom  gt           lt option value  london  gt London lt  option gt           lt option value  glasgow  gt Glasgow lt  option gt       lt  optgroup gt   lt  select gt  x000D   x000D   x000D   Unfortunately  only one  lt optgroup   gt  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  amp nbsp  trick up above

User · Answer

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    lt ul id  customComboBox  gt   amp nbsp      lt li gt Test lt  li gt       lt li gt Test 2 lt  li gt       lt li gt Test 3 lt  li gt   lt  ul gt    Script     document  ready function            customComboBox   click function               li   toggle  slow                  DEMO

User · Answer

Simply set height of the select tag  select      height  30px      max-height  30px

User · Answer

This simple hack will indent the text  Works well   select     text-indent  5px

User · Answer

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

User · Answer

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  amp  Firefox 81    x000D   x000D  select       font-size  2em      font-size-adjust  0 3    x000D   lt label gt    Select   lt select gt               lt option gt Option 1 lt  option gt               lt option gt Option 2 lt  option gt               lt option gt Option 3 lt  option gt             lt  select gt   lt  label gt  x000D   x000D   x000D

User · Answer

Hey guy the easy way to give option text padding from let just use    like check below  lt option value  quot  lt     subc- gt gc id   gt  quot  gt  amp nbsp  amp nbsp  amp nbsp  lt  php echo  subc- gt gc title    gt    lt  option gt   hope everyone enjoys this

User · Answer

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

User · Answer

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  39 s option element  Styling option value in select drop down html not work on Chrome  amp  Safari   The most widely used cross browser solution is to use ul li  Hope it helps

User · Answer

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

[html] Select option padding not working in chrome

Examples related to html

Examples related to css