CSS：文本输入边框上的过渡效果

Question

How to create transition effect like:

http://jsfiddle.net/mfn5nefb/6/

but for text input ?

I tried replace h1 with input but it does not work.

Answer 1

You have to change the HTML structure to do the same with input because you can't use pseudo elements like :after on an input element (which is an auto closing element)

HTML

<div id="input">
  <input type="text" value="CSS IS AWESOME" /><span></span>
</div>

CSS

#input {
    color: #666;
    position: relative;
    display: inline-block;
}

span {
    position: absolute;
    left: 50%;
    content: '';
    height: 40px;
    height: 5px;
    background: #f00;
    transition: all 0.5s linear;
    width: 0;
    bottom: -5px;  
}

input:hover ~ span {
    width: 200px;
    margin-left: -105px;
}

See this fiddle

Answer 2

 .input_container{ display: inline-block; text-align: center; } .awsome_input{ padding: 5px 10px; border: none; background: transparent; display: block; } .awsome_input_border{ display:inline-block; width:0px; height: 2px; background: #FEC938; position: relative; top:-5px; -webkit-transition: all ease-in-out .15s; -o-transition: all ease-in-out .15s; transition: all ease-in-out .15s; } .awsome_input:hover, .awsome_input:active, .awsome_input:focus{ outline: none; } .awsome_input:hover+.awsome_input_border, .awsome_input:active+.awsome_input_border, .awsome_input:focus+.awsome_input_border{ width:100%; } 

 <div class="input_container"> <input type="text" class="awsome_input" placeholder="What do you think?"/> <span class="awsome_input_border"/> </div>