Menu
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...
926
Add the attribute 'for' to the label element and assign it the value select element's id. In my example above I added the id='sel-options' attribute to the <select> dropdown and added the attribute for='sel-options' to the <label> element.
Unfortunately, there is no 'word-wrap' feature on Comboboxes or Dropdowns. All you can do is try to make the ComboBox wider or the text smaller.
Example ExplainedUse any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.
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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
