Move input field on top of span

user_8311330 0
Viewed 767

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>

css html
3 Answers

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>

user_135734440

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>

user_133686580

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>

user_35643590
Related