CODEWITHSUNDEEP
cssinternet-explorerselect
WilliamLou
WilliamLou

Reputation: 1904

how to make sure select option text align in the center in IE?

The following CSS works in FF, but not in IE(at least 8.0), how can I make sure that the text align in the center for IE8.0? Thanks!!!

select, option {
    text-align: center;
}

Upvotes: 11

Views: 50017

Answers (3)

Vishu Singhvi
Vishu Singhvi

Reputation: 415

You can make a class and call it using the 'STYLE TAG' in the option field.::

For Eg:--

<style type="text/css">
select { width: 400px; text-align:center; }
select .lt { text-align:left; }
</style>




<select name="state" class="ddList">
<option value="">(please select a state)</option>
<option class="lt" value="--">none</option>
<option class="lt" value="AL">Alabama</option>
<option class="lt" value="AK">Alaska</option>
<option class="lt" value="AZ">Arizona</option>
<option class="lt" value="AR">Arkansas</option>
<option class="lt" value="CA">California</option>
<option class="lt" value="CO">Colorado</option>
</select>

Upvotes: -1

Chase Seibert
Chase Seibert

Reputation: 15841

Given that this is not possible in IE, I think you would have to resort to:

  1. Implementing your own SELECT widgets. There are many JS libraries that do this, mostly because SELECT inputs are hard to style.

  2. Insert the appropriate whitespace in front of the smaller options.

Edit: looks like whitespace doesn't work, but HTML space does:

<SELECT>
   <OPTION>&nbsp;&nbsp;&nbsp;SMALL</OPTION>
   <OPTION>&nbsp;&nbsp;LARGER</OPTION>
</SELECT>

That's quite a hack...

Upvotes: 2

Pekka
Pekka

Reputation: 449415

Unfortunately, you can't change the alignment of SELECT items in IE, although it surprises me that even IE 8 keeps this bad habit.

Upvotes: 12

Related Questions