CODEWITHSUNDEEP
cssinputbordertransition
Dmytro
Dmytro

Reputation: 717

CSS: Transition effect on text input border

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.

Upvotes: 0

Views: 19647

Answers (2)

Dipak
Dipak

Reputation: 6950

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

Upvotes: 5

Nutshell
Nutshell

Reputation: 8537

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

Upvotes: 5

Related Questions