CODEWITHSUNDEEP
htmlcss
thinkanotherone
thinkanotherone

Reputation: 3145

Adding a text label in front of dropdown list

I am trying to add a label in front of a select box, I have set the div tag that contains both element to be "inline-block". But, the span is still on top of the select box.

<div class="unselected-field" style="display: inline-block;" id="selectCountry">
    <span>test</span><select id="countrySelect" name="countrySelect"></select>
</div>

Any ideas ? I am on Chrome...

Upvotes: 10

Views: 78723

Answers (6)

itsmehemant7
itsmehemant7

Reputation: 343

This works like charm:

<select id="countrySelect" name="countrySelect">
  <option  disabled selected style="display:none">Select Your Country:</option>
  <option>India</option>
  <option>USA</option>
  <option>UK</option>
</select>

Upvotes: 0

tokhi
tokhi

Reputation: 21618

One option would be to just disable the first selected option:

<select id="countrySelect" name="countrySelect">
  <option  disabled selected>Select Your Country:</option>
  <option>USA</option>
  <option>Germany</option>
  <option>France</option>
</select>

Upvotes: 16

Joseph
Joseph

Reputation: 119837

if the <select>'s width plus the <span>'s width is greater than the containing <div>, the <select> will be forced to go below the <span> instead of being beside it. also, <select>'s width relies on the text that it contains, so it can have a varying width unless you give it a static width.

Upvotes: 3

Turnip
Turnip

Reputation: 36642

Works fine for me http://jsfiddle.net/KG9hL/1/

Unless of course the containing divs width is less than the combined width of the label and select elements: http://jsfiddle.net/74bRX/

Upvotes: 0

SmithMart
SmithMart

Reputation: 2801

I usually wrap the label around the input:

<div class="unselected-field" style="display: inline-block;" id="selectCountry">
    <label>Test:<select id="countrySelect" name="countrySelect">
        <option>Option 1</option>
        </select>
    </label>
</div>​

Upvotes: 13

Justin Pihony
Justin Pihony

Reputation: 67075

Could you post the code in unselected-field because I was able to get this to display properly in Chrome http://jsfiddle.net/tVT67/

In fact, I can even remove the inline-block and it still works http://jsfiddle.net/H3GDN/

Upvotes: 0

Related Questions