CSS: efecto de Transición en la entrada de texto de la frontera

Cómo crear efecto de transición como:

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

pero para el texto input?

Traté de sustituir h1 con input pero no funciona.

InformationsquelleAutor Dmytro | 2016-04-28

2 Kommentare

  1. 5

    Tiene que cambiar la estructura de HTML para hacer lo mismo con input porque usted no puede usar pseudo elementos como :after en un elemento de entrada (que es el auto de un elemento de cierre)

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

    Ver este violín

    • Muchas gracias!
    • eres bienvenido 🙂
  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>

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea