Can I center the first select option text leaving others left justified

[nelsonm]

Hi all,

Not a big issue but i thought i'd ask.

I've been trying to center the first select option while leaving the rest left justified, but i'm having not luck. The following is some sample code...

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

CSS text-align on the select tag works but on the whole list obviously. I tried it on the first option but no joy.

[kaled]

Your best bet may be to pad with spaces - it won't be perfect but it should be ok.

Kaled.

[rocknbil]

?

select { width: 400px; }
select .selected { text-align:center; }

If you mean the visible option item when it first loads, you'll have to class everything else (I think . . . but it works.)


<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>

[nelsonm]

thanks, ill try it.

btw, another question...

the select window does not stay open when you click on it to look for a selection. i have to hold the mouse button down to select anything. Is there a way to get the window to stay open while selecting?

[rocknbil]

Hmm, I'd say check your code in a validator, the only time I've seen that is when I have an error in my code or some Javascript interfering with my actions.

[nelsonm]

Here is the the code snippet...

<div id="edit-fields1">
<fieldset>
<legend>Charity fields</legend>
<label id="lStreet">Street: <input name="Street" type="text"/></label>
<label id="lCity">City: <input name="City" type="text"/></label>
<label id="lState">State: <input name="State" type="text"/><?php include("inc/US-States-drop-down-list.php"); ?></label>
<label id="lPostalCode" >PostalCode: <input name="PostalCode" type="text"/></label>
<label id="lCountry" >Country: <input name="Country" type="text"/><?php include("inc/country-drop-down-list.php"); ?></label><br/>
</fieldset>
</div>

As you can see, i include the select code via a php include file caled "US-States-drop-down-list.php". I copied the select block from generic samples on the internet. The following is shortened contents of the states include file.

<select name="ddState" class="ddList" id="ddState" onmouseup="passToTextBox('State')">
 <option class="ddSelected" value=" " selected="selected">(please select a state)</option>
 <option value="--">none</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>

</select>

[rocknbil]

Is the select wrapped in a <label> like the other fields? I see this all the time:

<label> I am the REAL label <input name="i-am-not-a-label"></label>

I don't know why it's prevalent, but should be

<p><label for="some-field"> I am the REAL label</label> <input name="i-am-not-a-label" id="some-field"></p>

Try that, it may be the culprit (if it's not, at least it will be correct . . . ) A label is an accessibility tool that when focused places the focus into the field with which it's associated.

[nelsonm]

Yes, as you can see from my post above. The php include file that includes the select code is wrapped in a <label>.

I wrap the label around the <input> and <select> to keep the text and text box together when i shrink the browser window with the white-space:nowrap css property.

I will change that and get back to you on the results. Thanks so much for identifying this possible cause.

[nelsonm]

Yup, that was the problem - thanks so much!

I replaced the <label> tags with <div> tags and it worked! The <select> list now functions normally.

[leishusheng]

Ha,thanks so much! I have the same puzzle.

[rocknbil]

Well, <div> is a generic container when nothing else will do. Surely you can use a semantic container . . . like a paragraph. You can style the <p> without padding and margin if need be. Say no to div-itis. :-)

[nelsonm]

<p> instead of <div> is a good idea since margines are a prob.

[rocknbil]

Just to clarify - "margins" are a presentation (visual) consideration. You'd use a paragraph (or list item, or other element) for semantic reasons. That is, your document markup describes the content that's in it:

<h1>I'm the main heading</h1>

<p>I'm a paragraph</p>

<ul>
<li>I'm a</li>
<li>list of links</li>
<li>Styled horizontally</li>
<li>Otherwise known as</li>
<li>a navigation bar</li>
</ul>

This provides relevant information about the content to screen readers and search engines. Divs and spans have no real semantic meaning, but you can style either of them, as well as any other element, to accommodate presentation. This is also the center of one of the most argued topics on the net, using tables for layout. Tables are meant to describe tabular data, not layout elements.

Dass' what I meant. :-)

[nelsonm]

ok, thanks.