css 如何隐藏标签没有js在焦点上

58wvjzkj  于 2022-11-27  发布在  其他
关注(0)|答案(3)|浏览(112)

如何隐藏标签“电话号码”在onfocus通过简单的onclick。或者可能是赞赏,如果可以在css中做。我试过,但需要一个更好的解决方案。让我知道,如果你可以。

<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>
pgky5nke

pgky5nke1#

您可以使用General sibling combinator
第一个
一般的同级组合子(~)分隔两个选择器,并匹配第二个元素的所有迭代,这些迭代跟随在第一个元素之后(尽管不一定紧跟在第一个元素之后),并且是同一个父元素的子元素。

jpfvwuh4

jpfvwuh42#

抓一个例子:)

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

pkln4tw63#

我必须添加一个div元素来 Package 输入和div,这样css选择器.field:focus .element-to-style才能工作。
比基本的不透明CSS
第一个
测试在这里:https://playcode.io/1017243

相关问题