Question

Hello Stack Overflowers！

我希望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); }仍然可见。

＆＃13;

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

＆＃13;

rxjs@5.0.0-beta.12

＆＃13;

Answer 1

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

以下是W3C specification如何使用伪元素

Answer 2

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

因此，jQuery不必将每个input包装在展开div 中，而是立即为您执行此操作，此处：http://jsfiddle.net/QrrpB/2467/

P.s：希望我理解你想要的东西。

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

3 个答案: