Question

在这个网站上：http://www.cinemec.nl/homepage/他们在搜索栏中的角落里有一个占位符，点击时浮动。

我想在我的网站上找到这个，但是我找不到怎么做，用onclick还是有简单的方法吗？

Answer 1

这可以用CSS完成。作为占位符padding属性的想法在:hover和:focus上已更改，因此它从左向右移动。结合CSS transition，我们可以为动作制作动画。

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

这是工作 demo

如何在悬停/焦点上设置输入占位符位置的动画

1 个答案: