如何在css中选择单击的输入

Question

#registeration_form input:nth-of-type(1):focus ~ #underline1,#registeration_form input:nth-of-type(2):focus  ~ #underline2,#registeration_form input:nth-of-type(3):focus  ~ #underline3,#registeration_form input:nth-of-type(4):focus  ~ #underline4,#registeration_form input:nth-of-type(5):focus  ~ #underline5,#registeration_form input:nth-of-type(6):focus  ~ #underline6{
    transition: 1000ms;
    width: 100%;
}

有没有什么简单的方法可以写出这段代码？

Answer 1

我不太确定你在构建什么，但这里有一个猜测（基于命名），它可以真正简化你的 CSS。基本上，我将事情更改为依赖共享类，而不是特定的ids。

.field .underline {
  width: 0;
  overflow: hidden;
  transition: 100ms;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  background-color: black;
}

#registeration_form input:focus + .underline {
 width: 100%; 
}

.field {
  display: inline-block;
  position: relative;
  margin-bottom: .5rem;
}

.field input {
  border: 1px solid #eee;
  padding: .5rem 1rem;
}

<form id="registeration_form">
  <div class="field">
    <input placeholder="Enter Name" aria-label="enter name" type="text" class="input" id="name" name="name">
    <span role="presentation" class="underline"></span>
  </div>

  <div class="field">
    <input placeholder="Enter Username" aria-label="enter username" type="text" class="input" id="username" name="username">
    <span role="presentation" class="underline"></span>
  </div>

  <div class="field">
    <input placeholder="Enter Email" aria-label="enter email" type="text" class="input" id="email" name="email">
    <span role="presentation" class="underline"></span>
  </div>
</form>

jsFiddle