扩展边框底部，重点放在文本输入上

Question

我想让这个border-bottom在input在focus上时仍然可见。

​

.expand input {
  padding: 10px;
  border: none;
  background: #eee;
}

.expand {
  display: inline-block;
}

.expand:after {
  display: block;
  content: "";
  border-bottom: 3px solid #2bcf67;
  transform: scaleX(0);
  transition: transform 0.5s;
  transform-origin:  0% 50%;
}

.expand:focus:after {
  transform: scaleX(1);
}

<div class="expand" tabindex="0">
  <input type="text" name="" id="" placeholder="Your text">
  Click here
</div>

<p>I would like to have same effect but clicking on text input</p>

​

Answer 1

<input>元素不能有伪元素，但是可以使用虚拟<div>元素作为您的边框：http://jsfiddle.net/QrrpB/2492/

​

.expand input {
  background: #eee;
  padding: 10px;
  border: none;
}

.expand {
  display: inline-block;
  position: relative;
}

.border {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  top: 100%;
  background: #2bcf67;
  transform: scaleX(0);
  transition: transform 0.5s;
  transform-origin:  0% 50%;
}

input:focus + .border, .expand:focus .border {
  transform: scaleX(1);
}

<div class="expand" tabindex="0">
  <input type="text" name="" id="" placeholder="Your text">
  <div class="border"></div>
  click
</div>

​

Answer 2

Pseudo-elements只支持container元素。因为呈现它们的方式在容器本身中作为子元素。input不能包含其他元素，因此不支持它们。

下面是如何使用伪元素的W3C规范

Answer 3

因此，与其将每个input封装在展开的div中，jQuery现在为您完成了以下操作：http://jsfiddle.net/QrrpB/2467/

希望我能正确理解你想要的。