CSS: Transition-Effekt auf text-input-Grenze

Wie erstellen Sie übergangseffekte wie:

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

aber für text input?

Ich habe versucht, ersetzen h1 mit input aber es funktioniert nicht.

InformationsquelleAutor Dmytro | 2016-04-28
  1. 5

    Ändern Sie die HTML-Struktur, das gleiche zu tun mit input weil Sie nicht verwenden können pseudo-Elemente wie :after auf ein input-element (das ist ein automatisch schließendes 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;
}

    Sehen Sie diese Geige

    • Ich danke Ihnen sehr!
    • du bist willkommen 🙂
    InformationsquelleAutor Vincent G
  2. 4

    CSS:

    .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%;
  
}

    HTML:

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

    InformationsquelleAutor Dipak
Schreibe einen Kommentar