Select dropdown inline label text

Question

I want to insert a label inside my select dropdown.

Here, Sell in is the label text and United States is one of the dropdown options. What's the best way to implement this.I feel i'll have to write a custom dropdown.

Answer 1

Did you mean something like this? http://jsfiddle.net/rw6d2r25/6/

select {
    padding-left:65px;
    height:40px;
    position:relative;
    border:1px solid #333;
    width:300px;
    display:block;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    -ms-appearance: none;
    border-radius: 0;
    -webkit-box-shadow: none;
}
label {
    position:absolute;
    z-index:1;
    height:40px;
    line-height:40px;
    pointer-events:none;
    text-indent:10px;
    font-weight:bold;
}
label, select {
    font-family:Arial;
    font-size:15px;
}

<label>Sell In:</label>
<select>
    <option>United States</option>
    <option>United AE</option>
</select>

Answer 2

Make the <select> naked:

* {font-family: 'Segoe UI'; font-size: 10pt;}
select {border: none; color: #666;}

<label>
  <span>Sell in</span>
  <select>
    <option>United States</option>
  </select>
</label>