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>

Answer 2

Try with the below code, I have refer it from here, https://codepen.io/chriscoyier/pen/CiflJ

It's not the exact what you want I think, but it is similar to that and more jazzy, so just play with this, might be you like it.

form {
  width: 320px;
  float: left;
  margin: 20px; 
  }
  
  form > div {
    position: relative;
    overflow: hidden;
    }
    
  form input, form textarea, form select {
    width: 100%;
    border: 2px solid gray;
    background: none;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
    padding: 8px 12px;
    outline: 0;
    }
    
    form input:valid, form textarea:valid, form select:valid {
      background: white; }
      
    form input:focus, form textarea:focus, form select:focus {
      border-color: grey; }
      
    form input:focus + label, form textarea:focus + label, form select:focus + label {
      background: grey;
      color: white;
      font-size: 70%;
      padding: 1px 6px;
      z-index: 2;
      text-transform: uppercase; }
  
  form label {
    transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s;
    position: absolute;
    color: #999;
    padding: 7px 6px; }
  
  form textarea {
    display: block;
    resize: vertical; }

form.go-bottom input, form.go-bottom textarea, form.go-bottom select {
  padding: 12px 12px 12px 12px; }

form.go-bottom label {
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%; }

form.go-bottom input:focus, form.go-bottom textarea:focus, form.go-bottom select:focus {
  padding: 4px 6px 20px 6px; }

form.go-bottom input:focus + label, form.go-bottom textarea:focus + label, form.go-bottom select:focus + label {
  top: 100%;
  margin-top: -16px; }

<form class="go-bottom">
  <h2>To Bottom</h2>
  <div>

    <input id="name" name="name" type="text" required>
        <label for="name">Your Name</label>
  </div>
  <br/>
  <div>
    <select id="car">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
   </select>
   <label for="car">Car</label>
  </div>
  <br/>
  <div>
    <textarea id="message" name="phone" required></textarea>
    <label for="message">Message</label>
  </div>
</form>