3

I want to center the text when using: < select > < option > . I customized < select > to a nice rectangle button, but the text is aligned to the left and I don't know how to target it in CSS so I can center it.

So far I have tried:

 option { text-align:center; }

and

 option[value=0] { text-align:center }

No luck..

Here is what I have so far:

http://jsfiddle.net/xtsx68pf/

I need the text to be centered. How do I do that with the < option > element?

user3658794
  • 699
  • 4
  • 12
  • 19
  • Unfortunately, the ` – Terry Oct 17 '14 at 22:42
  • Just read this : http://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box – retober Oct 17 '14 at 22:56

3 Answers3

1

Unfortunately, no, there is not a cross-browser solution using only CSS. I believe text centering does work on Firefox though.

You could do a left margin like so:

select {
  text-indent: 10px;
}

but this may not meet your requirement.

You can also look into plugins for stylized select elements.

brian
  • 2,745
  • 2
  • 17
  • 33
0

Try this

select, option {
padding-left: 30px;
}

fiddle Here

Ghostff
  • 1,407
  • 3
  • 18
  • 30
0

Similar to what eBrian said but try using percentages.

    select {
width:106px;
height:40px;
border:0;
background-color:#eee;
color:grey;
font-size:14px;
-webkit-appearance:none;
outline:none;
border-radius:0;
**text-indent: 25%;**

Seems to look alright

Metexora
  • 66
  • 1
  • 7