Comment animer espace réservé d'entrée position sur le vol stationnaire/focus

Sur ce site: http://www.cinemec.nl/homepage/ ils ont dans le champ de recherche dans le coin droit un espace réservé qui flotte sur cliquez sur.

Je veux ça sur mon site web mais je ne trouve pas comment faire, est-il un moyen facile avec onclick ou quelque chose?

OriginalL'auteur user3361571 | 2014-02-27

  1. 2

    Ce qui pourrait être fait avec les CSS. L'idée étant, l'espace réservé padding attribut est modifié sur :hover et :focus donc il se déplace de gauche à droite. Combiné avec un CSS transition nous pouvons animer le mouvement.

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

    Voici le travail démo

    J'ai mal compris votre question. Mise à jour à venir bientôt.

    OriginalL'auteur Brett DeWoody