css float select field title on click - html

Question

I would like to make the select field behave like the other two input fields. After the user fills out the fields, the field title floats on top.
How can I make the select item also behave like the other two input fields? so that by clicking on the field, the placeholder should float to the top.
And the default value shown as the placeholder is Your Letter, which will then move up after selecting a letter or clicking on the field.
body {
font-family: Avenir Next, Avenir, SegoeUI, sans-serif;
}
form {
margin: 2em 0;
}
.field {
display: flex;
flex-flow: column-reverse;
margin-bottom: 1em;
}
label, input {
transition: all 0.2s;
touch-action: manipulation;
}
input {
font-size: 1.5em;
border: 0;
border-bottom: 1px solid #ccc;
font-family: inherit;
-webkit-appearance: none;
border-radius: 0;
padding: 0;
cursor: text;
}
input:focus {
outline: 0;
border-bottom: 1px solid #666;
}
label {
text-transform: uppercase;
letter-spacing: 0.05em;
}
input:placeholder-shown + label {
cursor: text;
max-width: 66.66%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transform-origin: left bottom;
transform: translate(0, 2.125rem) scale(1.5);
}
::-webkit-input-placeholder {
opacity: 0;
transition: inherit;
}
input:focus::-webkit-input-placeholder {
opacity: 1;
}
input:not(:placeholder-shown) + label,
input:focus + label {
transform: translate(0, 0) scale(1);
cursor: pointer;
}
form p select, form p select.selectField {
width: 195px;
padding: 1px 3px;
}
<form action="">
<div class="field">
<input type="text" name="fullname" id="fullname" placeholder="Jane Appleseed">
<label for="fullname">Name</label>
</div>
<div class="field">
<input type="email" name="email" id="email" placeholder="jane.appleseed#example.com">
<label for="email">Email</label>
</div>
<div id="lettersSelection" >
<p class="required">
<select name="letters" id="letters" class="selectField" required="">
<option value="" selected disabled hidden>Your Letter</option>
<option value="A">Letter A</option>
<option value="B">Letter B</option>
<option value="C">Letter C</option>
</select>
<label for="letters">Letters</label>
</p>
</div>
</form>

Answer 1

This exactly what you asked for.
I've marked the lines in the CSS where changes were made.
I've also added an extra element to the HTML:
<span class="placeholder">Your Letter</span>
body {
font-family: Avenir Next, Avenir, SegoeUI, sans-serif;
}
form {
margin: 2em 0;
}
.field {
display: flex;
flex-flow: column-reverse;
margin-bottom: 1em;
}
label{
display: inline-block; /* <--- needed to have display other than default "inline" */
}
label,
input,
.placeholder{ /* <--- added ".placeholder" */
transition: .2s;
touch-action: manipulation;
}
input {
font-size: 1.5em;
border: 0;
border-bottom: 1px solid #ccc;
font-family: inherit;
-webkit-appearance: none;
border-radius: 0;
padding: 0;
cursor: text;
}
input:focus {
outline: 0;
border-bottom: 1px solid #666;
}
label {
text-transform: uppercase;
letter-spacing: 0.05em;
}
input:placeholder-shown+label,
.placeholder { /* <--- added ".placeholder" */
cursor: text;
max-width: 66.66%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transform-origin: left bottom;
transform: translate(0, 2.125rem) scale(1.5);
}
::-webkit-input-placeholder {
opacity: 0;
transition: inherit;
}
input:focus::-webkit-input-placeholder {
opacity: 1;
}
input:not(:placeholder-shown)+label,
input:focus+label {
transform: none; /* <--- changed to "none" to restore defaults */
cursor: pointer;
}
form p select,
form p select.selectField {
width: 195px;
padding: 5px; /* <--- bigger value to cover the placeholder text */
}
/* ------- ADDED ------ */
#lettersSelection{ position:relative; margin-top:3em; }
#lettersSelection .placeholder{
position: absolute;
top: -1.8rem;
left: 0;
}
select{ position:relative; z-index:1; }
select:focus + .placeholder{
transform: none; /* <--- moves the title up on "focus" */
}
<form action="">
<div class="field">
<input type="text" name="fullname" id="fullname" placeholder="Jane Appleseed">
<label for="fullname">Name</label>
</div>
<div class="field">
<input type="email" name="email" id="email" placeholder="jane.appleseed#example.com">
<label for="email">Email</label>
</div>
<div id="lettersSelection">
<p class="required">
<select name="letters" id="letters" class="selectField" required>
<option value="" selected disabled hidden>Your Letter</option>
<option value="A">Letter A</option>
<option value="B">Letter B</option>
<option value="C">Letter C</option>
</select>
<span class="placeholder">Your Letter</span>
<label for="letters">Letters</label>
</p>
</div>
</form>