CODEWITHSUNDEEP
htmlcss
Alex G
Alex G

Reputation: 595

CSS selector issue, focused input isn't properly selected

I am strangling with CSS overlay... My sample has two sets of input tags with label on top of it Clicking on the first number nicely switches to the edit mode. Unfortunately, clicking on the second number doesn't really work as expected. 

div[class="number_container"]>input:focus+label {
  display: none
}

.number_container {
  position: relative;
}

.number_content {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 22px;
  width: 148px;
  text-align: center;
  background: white;
}
<body>
  <div class="number_container">
    <input id="1" name="1" style="width: 150px;" type="number" value="100000">
    <label class="number_content" for="1">$1,000,014</label>
  </div>

  <br/>
  <br/>
  <div class="number_container">
    <input id="2" name="2" style="width: 150px;" type="number" value="200000">
    <label class="number_content" for="1">$2,000,014</label>
  </div>
</body>

it seems that CSS selector somehow selects the first div element Nevertheless it works with tab key

any help highly appreciated

Upvotes: 1

Views: 55

Answers (2)

RaJesh RiJo
RaJesh RiJo

Reputation: 4400

Issue is about you have mentioned for="1" that refers first input automatically when you focus on second input. So change it to "2" will solve the issue. check below snippet for reference.

div[class="number_container"]>input:focus+.number_content {
  display: none
}

.number_container {
  position: relative;
}

.number_content {
  position: absolute;
  top: 1px;
  left: 1px;
  height: 22px;
  width: 148px;
  text-align: center;
  background: white;
}
<body>
  <div class="number_container">
    <input id="1" name="1" style="width: 150px;" type="number" value="100000">
    <label class="number_content" for="1">$1,000,014</label>
  </div>

  <br/>
  <br/>
  <div class="number_container">
    <input id="2" name="2" style="width: 150px;" type="number" value="200000">
    <label class="number_content" for="2">$2,000,014</label>
  </div>
</body>

Upvotes: 1

luis
luis

Reputation: 202

try changing the "for" of your second label to "2" so it matches with the second input

Upvotes: 1

Related Questions