I'm trying to align the text to the center inside the select element of a form. It works fine in Firefox not in Chrome: any ideas?

Question

I'm trying to align the text to the center inside the select element of a form. It works fine in Firefox but the text still align to left in Chrome: any ideas?

Here's the css:

.top-search select{
  background: #fff;
  border: 1px solid #ccc;
  width: 190px;
  height: 28px;
  text-align: center;
  padding-top: 4px;
}

Works fine in FF but not in Chrome

can you provide the rest of the code? html/css of the form itself? — PlantTheIdea, Apr 12 '13 at 15:51
possible duplicate http://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box — Morpheus, Apr 12 '13 at 15:55
Since it's an inline element, maybe `text-align` is not a configurable CSS property for `select`. — Sparky, Apr 12 '13 at 15:57

score 0 · Answer 1 · answered Apr 12 '13 at 16:44

0

I know that styling selects is something that is not very easy. There are some things you can change (height and border) but other attributes you cannot. It's more up to the browser to decide how it will be styled and how much you can change. So it would appear FF is allowing you to change it while Chrome is not. And I think it's entirely up to the browser (and OS) in this case.

answered Apr 12 '13 at 16:44

Fernker

2,238
20
31

I very much appreciate your answer. Yes, styling form elements is not an easy task! – Manuel Isern Apr 12 '13 at 20:58

I'm trying to align the text to the center inside the select element of a form. It works fine in Firefox not in Chrome: any ideas?

1 Answers1