'Move input field on top of span

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>
htmlcss


Solution 1:[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>

Solution 2:[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>

Solution 3:[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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Rayees AC
Solution 3 Manjuboyz

Related Questions