Cómo animar la entrada de marcador de posición en hover/focus

En este sitio web: http://www.cinemec.nl/homepage/ que tienen en el campo de búsqueda a la derecha en la esquina de un marcador de posición que flota en haga clic en.

Quiero que este en mi web pero no puedo encontrar la manera de hacerlo, hay una manera fácil con onclick o algo?

InformationsquelleAutor user3361571 | 2014-02-27

1 Kommentar

  1. 2

    Esto se podría hacer con CSS. La idea de ser el marcador de posición padding atributo se modifica en :hover y :focus de manera que se mueve de izquierda a derecha. Combinado con un CSS transition podemos animar el movimiento.

    HTML

    <input type="search" placeholder="Search" />

    CSS

    input {
        background-color:#FFFFFF;
        width:160px;
    }
    
    input::-webkit-input-placeholder {
       color: #CCCCCC;
       position:relative;
       padding-left:0;
        -webkit-transition: padding 0.5s; /* For Safari 3.1 to 6.0 */
        transition: padding 0.5s;
    }
    
    input:-moz-placeholder { /* Firefox 18- */
        color: #CCCCCC;
        position:relative;
        padding-left:0;
        -moz-transition: padding 0.5s; /* For Safari 3.1 to 6.0 */
        transition: padding 0.5s;
    }
    
    input::-moz-placeholder {  /* Firefox 19+ */
        color: #CCCCCC;
        position:relative;
        padding-left:0;
        -moz-transition: padding 0.5s; /* For Safari 3.1 to 6.0 */
        transition: padding 0.5s;
    }
    
    input:-ms-input-placeholder {  
        color: #CCCCCC;
        position:relative;
        padding-left:0;
        -ms-transition: padding 0.5s; /* For Safari 3.1 to 6.0 */
        transition: padding 0.5s;
    }
    
    /*
    * On hover
    */
    input:hover::-webkit-input-placeholder,
    input:focus::-webkit-input-placeholder {
         padding-left:100px;
    }
    
    input:hover:-moz-placeholder,
    input:focus:-moz-placeholder{ /* Firefox 18- */
          padding-left:100px;
    }
    
    input:hover::-moz-placeholder,
    input:focus::-moz-placeholder{  /* Firefox 19+ */
       padding-left:100px;
    }
    
    input:hover:-ms-input-placeholder,
    input:focus:-ms-input-placeholder{  
          padding-left:100px;
    }

    Aquí está el trabajo demo

    • No he entendido tu pregunta. Actualización próximamente.

Kommentieren Sie den Artikel

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

Pruebas en línea