テキストの入力を重視した枠線の拡大

Question

こんにちはスタックオーバーフロー！

inputがfocusの場合にこのborder-bottomを引き続き表示したいと思います。

.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>要素がpseudoelementsを持つことはできませんが、あなたはあなたのための境界線であることをダミー<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は他の要素を含むことができないため、サポートされていません。ここで

はdiv要素を拡大 内のすべてのinputをラップするので

Answer 3

を擬似要素をだからではなく、使用方法についてW3C specificationで、jQueryがないこと、今、ここにあなたのために：http://jsfiddle.net/QrrpB/2467/

シモンズ：私はあなたが望んでいたことを正しく理解していますように。