Once i click on label select button should get open

Question

i want to open select button if i click on label ,

here is the code

<label>sachin</label>
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

is there any way in css or jquery ? i am not sure about this thing.

fiddle :http://jsfiddle.net/Yh3Jf/

Answer 1

In case someone else is searching for this, I did this behavior by expanding the padding of the <select> tag, and making the label positioned absolute.

<div class="field-select">
  <label class="field-select__label" for="selector">Clickable Label</label>
  <select class="field-select__input" id="selector" name="selector">
    <option value="val1">value 1 </option>
    </option><option value="val2">Value 2</option>
  </select>
</div>

.field-select {
  position: relative;
}

.field-select__label {
  position: absolute;
  pointer-events: none;
  top: 5px;
  left: 0;
}

.field-select__input {
  padding: 50px 50px 20px 10px;
}

Check working example on codepen