这两个事件都是焦点，是否需要JS？

Question

我不知道如何在使用focus的输入上同时获得这两种效果(参见下面的代码片段)。我注意到焦点只适用于这个元素，它是第一行的。谁能告诉我原因吗？在不使用JavaScript的情况下，是否有可能在焦点上同时获得这两种效果？

​

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;
}

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

您可以连接选择器+ like或~或其他。

<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>
</form>

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;
}

Answer 3

有效的选择器是input:focus + .border和input:focus + label (有两种类型的输入，但这对工作并不重要)。选择器只选择相邻的同级。如果要使它独立于标签和边框的顺序工作，则应该使用~。这将在所选元素之后选择任何同级元素，而不仅仅是相邻元素。

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

在MDN上给出了关于选择器和组合子的一个很好的概述。有一些相当强大的！