Display label inside select - html

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>