CODEWITHSUNDEEP
htmlcss
Daan Seuntjens
Daan Seuntjens

Reputation: 960

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>

Upvotes: 3

Views: 1264

Answers (3)

s.kuznetsov
s.kuznetsov

Reputation: 15213

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>

Upvotes: 4

Rayees AC
Rayees AC

Reputation: 4659

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>

Upvotes: 2

Manjuboyz
Manjuboyz

Reputation: 7066

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>

Upvotes: 1

Related Questions