homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

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

 12:08 am on Dec 17, 2010 (gmt 0)

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>

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



 11:55 am on Dec 19, 2010 (gmt 0)

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



 6:18 pm on Dec 19, 2010 (gmt 0)


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


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


 3:35 pm on Dec 20, 2010 (gmt 0)

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?


 5:46 pm on Dec 20, 2010 (gmt 0)

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.


 2:57 am on Dec 21, 2010 (gmt 0)

Here is the the code snippet...

<div id="edit-fields1">
<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/>

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>



 5:05 pm on Dec 23, 2010 (gmt 0)

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.


 5:35 pm on Dec 23, 2010 (gmt 0)

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.


 6:15 pm on Dec 23, 2010 (gmt 0)

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.


 4:44 am on Dec 25, 2010 (gmt 0)

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


 5:45 pm on Dec 29, 2010 (gmt 0)

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. :-)


 5:57 pm on Dec 29, 2010 (gmt 0)

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


 6:59 pm on Dec 31, 2010 (gmt 0)

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>

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

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. :-)


 7:38 pm on Dec 31, 2010 (gmt 0)

ok, thanks.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved