2

I tried to add some letter-spacing to the options of a selectbox. It seems that this do not work. To test if i touch the right element I added some color to the option.

letter-spacing

select {
  letter-spacing:10px;
}

option {
  letter-spacing: 10px;
  color: red;
}
<select class="form-control" name="select" id="myselect">
   <option value="105">Option 1</option>
   <option value="106">Option 2</option>
   <option value="107">Option 3</option>
</select>
Arjan Knol
  • 942
  • 5
  • 20
honsa
  • 21
  • 1
  • 4
  • Read: http://stackoverflow.com/questions/5887133/how-to-style-a-select-tags-option-element – Troyer Mar 30 '17 at 08:56
  • if you want to style dropdown selection, you will have to use some js lib to do so... There are many browsers, that complety ignores dropdown styling (in addition - mobile browsers will pop up the dropdown list with system visuals - fonts, sizes, color and so on) – Adam K. Mar 30 '17 at 08:57
  • letter spacing working with your fiddle.. i have checked with firefox, which browser do you got this issue – Jishnu V S Mar 30 '17 at 09:02

1 Answers1

0

If you want to style dropdown selection, you will have to use some js lib to do so... There are many browsers, that complety ignore dropdown styling (in addition - mobile browsers will pop up the dropdown list with system visuals - fonts, sizes, color and so on)

Check out something like this http://www.jqueryscript.net/demo/Easy-jQuery-Based-Drop-Down-Builder-EasyDropDown/

I personally don't recommend trying to style native <select><option> for the sake of visual integrity

Adam K.
  • 888
  • 6
  • 18