Question

我无法弄清楚如何在使用焦点的输入上获得这两种效果（请参阅下面的代码段）。我注意到焦点只对这个排在第一位的元素起作用。有人可以告诉我为什么吗？是否可以在不使用JavaScript的情况下获得焦点效果？

＆＃13;

form {
  margin: 30px;
  font-family: Arial;
}

.expand {
  display: block;
  position: relative;
  margin-top: 20px;
  width: 300px;
}

input[type="text"],
input[type="email"] {
  border: none;
  background-color: #eee;
  padding: 10px;
  width: 280px;
}

.border {
  position: absolute;
  display: block;
  height: 3px;
  width: 100%;
  top: 100%;
  background: red;
  transform: scaleX(0);
  transition: transform 0.5s;
  transform-origin: 0 50%;
}

label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
  transition: 0.2s;
  margin-left: 10px;
}

input[type="text"]:focus + .border,
input[type="email"]:focus + .border {
  transform: scaleX(1);
}

input[type="text"]:focus + label,
input[type="email"]:focus + label {
  top: -10px;
  font-size: 12px;
  color: red;
  font-weight: bold;
  margin: 0;
}

＆＃13;

<form action="">
  <div class="expand">
    <input type="text" name="" id="">
    <!-- border before label -->
    <div class="border"></div>
    <label for="">Here works border effect</label>
  </div>
  
  <div class="expand">
    <input type="email" name="" id="">
    <!-- border after label -->
    <label for="">Here works label effect</label>
    <div class="border"></div>
  </div>
</form>

＆＃13;

Answer 1

如果使用+选择器，只会影响直接兄弟，请使用~

form {
  margin: 30px;
  font-family: Arial;
}

.expand {
  display: block;
  position: relative;
  margin-top: 20px;
  width: 300px;
}

input[type="text"],
input[type="email"],
textarea {
  border: none;
  background-color: #eee;
  padding: 10px;
  width: 280px;
}

textarea {
  resize: none;
  margin-bottom: -1px;
}

.border {
  position: absolute;
  display: block;
  height: 3px;
  width: 100%;
  top: 100%;
  background: red;
  transform: scaleX(0);
  transition: transform 0.5s;
  transform-origin: 0 50%;
}

label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
  transition: 0.2s;
  margin-left: 10px;
}

input[type="text"]:focus ~ .border,
input[type="email"]:focus ~ .border,
textarea:focus ~ .border {
  transform: scaleX(1);
}

input[type="text"]:focus ~ label,
input[type="email"]:focus ~ label,
textarea:focus ~ label {
  top: -10px;
  font-size: 12px;
  color: red;
  font-weight: bold;
  margin: 0;
}

<form action="">
  <div class="expand">
    <input type="text" name="" id="">
    <!-- border before label -->
    <div class="border"></div>
    <label for="">Here works border effect</label>
  </div>
  
  <div class="expand">
    <input type="email" name="" id="">
    <!-- border after label -->
    <label for="">Here works label effect</label>
    <div class="border"></div>
  </div>
</form>

Answer 2

这里的小提琴：https://jsfiddle.net/3nw7mkfe/1/

你可以连接选择器+喜欢＆gt;或〜或其他。

SELECT id_page from sb_nav_page

Answer 3

您的有效选择器是input:focus + .border和input:focus + label（有两种类型的输入，但这对于工作无关紧要）。 + selector仅选择相邻的兄弟。如果要使其工作独立于标签和边框的顺序，则应使用general sibling selector ~。这将选择所选元素之后的任何兄弟，而不仅仅是相邻元素。

因此，您的选择器将变为input:focus ~ .border和input:focus ~ label。希望有所帮助。

MDN给出了选择器和组合器的一个很好的概述。有一些非常强大的！

Answer 4

这将根据您的需要进行

＆＃13;

form {
  margin: 30px;
  font-family: Arial;
}
.expand {
  display: block;
  position: relative;
  margin-top: 20px;
  width: 300px;
}
input[type="text"],
input[type="email"],
textarea {
  border: none;
  background-color: #eee;
  padding: 10px;
  width: 280px;
}

textarea {
  resize: none;
  margin-bottom: -1px;
}

.border {
  position: absolute;
  display: block;
  height: 3px;
  width: 100%;
  top: 100%;
  background: red;
  transform: scaleX(0);
  transition: transform 0.5s;
  transform-origin: 0 50%;
}

label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
  transition: 0.2s;
  margin-left: 10px;
}

input[type="text"]:focus + label + .border,
input[type="email"]:focus + label + .border,
textarea:focus + .border {
  transform: scaleX(1);
}

input[type="text"]:focus + label,
input[type="email"]:focus + label,
textarea:focus + label {
  top: -10px;
  font-size: 12px;
  color: red;
  font-weight: bold;
  margin: 0;
}

＆＃13;

<form action="">   
  <div class="expand">
    <input type="email" name="" id="">
    <!-- border after label -->
    <label for="">Here works label effect</label>
    <div class="border"></div>
    
  </div>
  <div class="expand">
    <input type="email" name="" id="">
    <!-- border after label -->
    <label for="">Here works label effect</label>
    <div class="border"></div>
  </div>
</form>

＆＃13;

检查它是否可以根据需要使用

焦点上的这两个事件都需要JS吗？

4 个答案: