how to hide the label without js on focus-CodePudding

How to hide the label "phone number" in onfocus by simple onclick. Or may be ppreciated if can do in css. i tried but need a better solution.Let me know if you can.

<div >
  <div >
    <select >
      <option> 91</option>
      <option> 92</option>
    </select>

    <input  type="text">
    <div ></div>
    <div >
      <label>Phone No.</label>
    </div>
  </div>
</div>

CodePudding user response：

You can use General sibling combinator

.phone-input:focus~div.phone-label label {
  display: none;
}

<div >
  <div >
    <select >
      <option> 91</option>
      <option> 92</option>
    </select>

    <input  type="text">
    <div ></div>
    <div >
      <label>Phone No.</label>
    </div>
  </div>
</div>

The general sibling combinator (~) separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and are children of the same parent element.

CodePudding user response：

Catch an example :)

input.phone-input:focus ~ .phone-label {
    display: none;
}

CodePudding user response：

I had to add a div element to wrap the input and div so that the css selector .field:focus .element-to-style could work.
than its just basic opacity css

.phone-input:focus   .phone-label {
  opacity: 1;
}
.phone-label {
  opacity: 0;
}

<div className="form-row">
    <div className="input-data">
    <select className="phone-select">
        <option> 91</option>
        <option> 92</option>
    </select>
    <div>
        <input className="phone-input" type="text" />
        <div className="phone-label">
        <label>Phone No.</label>
        </div>
    </div>
    <div className="underline"></div>
    </div>
    </div>
<style>
.phone-input:focus   .phone-label {
  opacity: 1;
}
.phone-label {
  opacity: 0;
}
</style>
</div>

test is here: https://playcode.io/1017243