jquery - que - texto placeholder

Cómo animar la posición del marcador de posición de entrada en el desplazamiento/foco

Question

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

Quiero que esto aparezca en mi sitio web pero no puedo encontrar cómo hacerlo, ¿hay alguna manera fácil de hacer clic o algo?

Answer 1

Esto podría hacerse con CSS. La idea de que el atributo de padding marcador de posición se padding en :hover desplazarse y :focus para que se mueva de izquierda a derecha. Combinado con una transition CSS, 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á la demostración de trabajo