CODEWITHSUNDEEP
javascripthtmlcss
user19171988
user19171988

Reputation:

how to hide the label without js on focus

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 class="form-row">
  <div class="input-data">
    <select class="phone-select">
      <option>+91</option>
      <option>+92</option>
    </select>

    <input class="phone-input" type="text">
    <div class="underline"></div>
    <div class="phone-label">
      <label>Phone No.</label>
    </div>
  </div>
</div>

Upvotes: 1

Views: 40

Answers (3)

Moussa Bistami
Moussa Bistami

Reputation: 1087

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

Upvotes: 0

Szymon Gesele
Szymon Gesele

Reputation: 56

Catch an example :)

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

Upvotes: 0

angel.bonev
angel.bonev

Reputation: 2232

You can use General sibling combinator

.phone-input:focus~div.phone-label label {
  display: none;
}
<div class="form-row">
  <div class="input-data">
    <select class="phone-select">
      <option>+91</option>
      <option>+92</option>
    </select>

    <input class="phone-input" type="text">
    <div class="underline"></div>
    <div class="phone-label">
      <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.

Upvotes: 1

Related Questions