Default Writing, On a Bootstrap selection bar HTML

Question

In my default selection it shows the first element in the list "Select a genre". That is how I want to see it but I dont want it ("select a genre") to be select able and seen in the list

        <div class="wrapper">   

                <select id="first-disabled" class="selectpicker" data-hide-disabled="true" data-live-search="true">
                <optgroup  >
                <option>Select a Genre</option>
                </optgroup>
                <optgroup label="Rock">
                  <option>Punk Rock</option>
                  <option>Hard Rock</option>

                </optgroup>
                <optgroup label="Pop">
                  <option>Turkish Pop</option>
                  <option>English Pop</option>
                </optgroup>

              </select>

        </div>

---

  .wrapper {
  position: relative;
  top: 326px;
  left: -42px;
  height: 100%;
  width: 100%;
  z-index: 10;
  text-align: center;
}

As it can be seen in the code my first option seems to be the default selection. As you can see my div wrapper css behind my selection bar code. I use custom bootstrap bar. As it can be seen in the image it can be seen and selectable in the option list.

here is the image:

Answer 1

You can make it non-selectable by adding the property disabled to it.

<option value="" disabled="disabled">Select a Genre</option>

In regards to hiding it from the list, I don't believe you can do this natively. You might be able to using javascript, but not with strict HTML. If it were me, I would stick with the native HTML semantics of showing it in the list.

This other question on SO might help: A Placeholder for the `select` tag?

UPDATE:

You could hide it using inline-styling maybe?

<option value="" disabled="disabled" style="display:none;">Select a Genre</option>

http://jsfiddle.net/11dpc8m7/