Display label inside select

Question

I couldn't find any relevant information and not even sure it's feasible in HTML, but I would like to display a Label line above the value in a select field, like the "EXP MONTH/YEAR" in the following image:

Is that doable? I've been searching for a way to implement it for a few days days to no avail. Thanks!

Answer 1

I may be a little bit late, but: You do not need anything special, it's simply formating. Put label on top of form, wrap both label and select in a div, then adjust background colors and borders. See the example:

.select-wrap 
{
  border: 1px solid #777;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 0 5px 5px;
  width:200px;
  background-color:#ebebeb;
}

.select-wrap label
{
  font-size:10px;
  text-transform: uppercase;
  color: #777;
  padding: 2px 8px 0;
}

select
{
  background-color: #ebebeb;
  border:0px;
}

<div class="select-wrap">
  <label>Color</label>
  <select name="color" style="width: 100%;">
    <option value="">---</option>
    <option value="yellow">Yellow</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
  </select>
</div>

---

UPDATE

I somehow remembered that I have this post. As I have improved it for personal usage, and this is version is better (you can click anywhere inside select - it will trigger dropdown, while on previous version you couln't) I thought I should share an update I have made to my code and used since.

.select-wrap {
  border: 1px solid #777;
  border-radius: 4px;
  padding: 0 5px;
  width:200px;
  background-color:#fff;
  position:relative;
}
.select-wrap label{
  font-size:8px;
  text-transform: uppercase;
  color: #777;
  padding: 0 8px;  
  position: absolute;
  top:6px;
}

select{
  background-color: #fff;
  border:0px;
  height:50px;
  font-size: 16px;
}

<div class="select-wrap">
  <label>Color</label>
  <select name="color" style="width: 100%;">
    <option value="">---</option>
    <option value="yellow">Yellow</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
  </select>
</div>