CSS selector issue, focused input isn't properly selected

Question

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

RaJesh RiJo · Accepted Answer · 2017-10-24 15:04:32Z

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>

luis · Accepted Answer · 2017-10-24 15:03:44Z

1

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

answered Oct 24, 2017 at 15:03

luis

2025 silver badges14 bronze badges

Collectives™ on Stack Overflow

CSS selector issue, focused input isn't properly selected

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related