主页 / 问题 / 740975
Accepted
Alexxosipov
Asked:2020-11-06 21:16:49 +0000 UTC2020-11-06 21:16:49 +0000 UTC

引用附加到输入的标签的正确方法是什么？

  • 772

大家好。有一个标签被附加到的输入。在css中访问它的正确方法是什么？它无法通过input:focus + label。

代码笔： https ://codepen.io/Alexxosipov/pen/rYLvYB

编码：

<div class="input_div">                                     
  <input type="text" id="promocode_input" name="promocode"><br>
  <label for="promocode_input">Введите промокод</label>         
</div>

<style>
@bluebtn: rgb(48,40,152);
body {
  font-family: arial;
}
input {
  max-width: 220px;
  border: none;
  border-bottom: 1px solid lighten(@bluebtn, 30%);
  padding: 10px;
  display: block;
  float: left;  
  margin: 15px auto 0;          
  border-radius: 0;
  padding-left: 3px;
  width: 95%;
  outline: none;
}       
.oute {
   margin: 30px auto;
}
.input_div {

  position: relative;  
  display: block;
  label {
    position: absolute;
    top: 24px;
    transition: 0.25s;
    display: block;
    left: 3px;
  }
  input:focus + label {
    top: 10px;
  }
}
</style>
css

2 个回答

  1. Best Answer

    CSS 选择器

    选项编号 1

    input:focus ~ label[for="promocode_input"] {
   top: 10px; 
}

    选项编号 2

     input:focus ~ .input_div label {
   top: 10px;
}

    选项编号 3

     input:focus ~ label {
   top: 10px;
}

    div p - p 是 div 的子元素。

    div > p - 只有直系子级

    div ~ p - 正确的邻居：所有 p 位于 div 之后的同一嵌套级别。

    div + p是第一个右邻居：p 位于紧跟在 div 之后的相同嵌套级别（如果有）。

    • 4

  2. +指向前一个元素之后的元素。在你的情况下，下一个。元素是<br>。请改用此构造：input:focus ~ label

    https://codepen.io/anon/pen/ZaOoMz

    • 4

相关问题