Move input field on top of span - html

Question

I've a span as a label for my inputfield. The label goes above the input field when selected.
My problem is that when you try to click on the input field, the label is 'in front' of the inputfield and blocks you from selecting it.
I tried fixing it using z-indexes but this doesn't seem to work.
Can somebody help me with getting the input field in front of the span?
#input {
color: #686868;
vertical-align: middle;
padding: 0px !important;
font-size: 16px;
border-width: 0;
overflow: visible;
box-shadow: none;
border: none;
border-bottom: 1px solid #d5dce3;
background-color: transparent !important;
}
#input:focus {
border-color: #1F76BC;
}
#label {
color: rgba(0,0,0,.99);
transition-timing-function: cubic-bezier(.075,.82,.165,1);
transition-duration: .5s;
position: absolute;
width: 100%;
text-align: left;
font-size: 16px;
bottom: 6px;
color: #8792a1;
}
.container:focus-within #label {
transform: translate3d(0,-26px,0);
color: rgba(0,0,0,.99);
}
.container {
position: relative;
margin-top: 32px;
}
<div class="container">
<span id="label">Provincie</span>
<input type="text" id="input" value="" size="40">
</div>

Answer 1

Use label instead of span and your input will be well clickable, regardless of the location of the placeholder
input = document.querySelector("#input");
label = document.querySelector(".container > label");
input.addEventListener("change", function () {
if (this.value !== "") {
label.style.transform = "translate3d(0, -26px, 0)";
} else {
label.style.transform = "";
}
});
#input {
color: #686868;
vertical-align: middle;
padding: 0px !important;
font-size: 16px;
border-width: 0;
overflow: visible;
box-shadow: none;
border: none;
border-bottom: 1px solid #d5dce3;
background-color: transparent !important;
}
#input:focus {
border-color: #1f76bc;
}
label {
color: rgba(0, 0, 0, 0.99);
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
transition-duration: 0.5s;
position: absolute;
width: 100%;
text-align: left;
font-size: 16px;
bottom: 6px;
color: #8792a1;
}
.container:focus-within label {
transform: translate3d(0, -26px, 0);
color: rgba(0, 0, 0, 0.99);
}
.container {
position: relative;
margin-top: 32px;
}
<div class="container">
<label for="input">Provincie</label>
<input type="text" id="input" value="" size="40" />
</div>

Answer 2

please add this style.
#input{
position:relative;
z-index:999;
}
#input {
color: #686868;
vertical-align: middle;
padding: 0px !important;
font-size: 16px;
border-width: 0;
overflow: visible;
box-shadow: none;
border: none;
border-bottom: 1px solid #d5dce3;
background-color: transparent !important;
position:relative;
z-index:999;
}
#input:focus {
border-color: #1F76BC;
}
#label {
color: rgba(0,0,0,.99);
transition-timing-function: cubic-bezier(.075,.82,.165,1);
transition-duration: .5s;
position: absolute;
width: 100%;
text-align: left;
font-size: 16px;
bottom: 6px;
color: #8792a1;
}
.container:focus-within #label {
transform: translate3d(0,-26px,0);
color: rgba(0,0,0,.99);
}
.container {
position: relative;
margin-top: 32px;
}
<div class="container">
<span id="label">Provincie</span>
<input type="text" id="input" value="" size="40">
</div>

Answer 3

Something like this??
#input {
color: #686868;
vertical-align: middle;
padding: 0px !important;
font-size: 16px;
border-width: 0;
overflow: visible;
box-shadow: none;
border: none;
border-bottom: 1px solid #d5dce3;
background-color: transparent !important;
}
#input:focus {
border-color: #1F76BC;
}
#label {
color: rgba(0, 0, 0, .99);
transition-timing-function: cubic-bezier(.075, .82, .165, 1);
transition-duration: .5s;
position: absolute;
width: 100%;
text-align: left;
font-size: 16px;
bottom: 6px;
color: #8792a1;
}
.container:focus-within #label {
transform: translate3d(0, -26px, 0);
color: rgba(0, 0, 0, .99);
}
.container {
position: relative;
margin-top: 32px;
}
<div class="container">
<input type="text" id="input" value="" size="40" placeholder="Provincie">
</div>