Twitter Bootstrap: Select Box vs DropDown

css, html, javascript, twitter-bootstrap

Solution

Just hide that option in CSS.

CSS :

.form-control option:first-child {
    display:none;
}

Working fiddle here

NOTE : Once they select any option, they can't go back (Using a mouse). Keyboard rocks!

EDIT:

You can change your HTML to contain

<option disabled selected>Select number</option>

so that once they select any option, they can't go back at all !

New fiddle

Problem

I have a simple code from bootstrap for selection ``` <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> ``` This gives a select box with drop down options 1,2,3,4 and 5. but the value displayed in select box is 1. I want to display the select box with title "Select number" and in that drop down the values should be 1,2,3,4 and 5. Crude way to do that is add ``` <option>Select number</option> ``` Is there a better way such that I can display Select Number in select box but not on the list of list box.? Thanks

Original source