Twitter Bootstrap: Select Box vs DropDown

Question

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

Answer 1

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