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

Posted 2023-03-05

【中文标题】如何在悬停/焦点上为输入占位符位置设置动画

【英文标题】：How to animate input placeholder position on hover/focus

【发布时间】：2014-03-31 07:02:36

【问题描述】：

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

我想在我的网站上使用它，但我找不到如何做到这一点，是否有使用 onclick 或其他方式的简单方法？

【参考方案1】：

这可以通过 CSS 来完成。占位符padding 属性的想法在:hover 和:focus 上进行了更改，因此它从左向右移动。结合 CSS transition，我们可以为移动设置动画。

input 
  background-color: #FFFFFF;
  width: 160px;
  padding: 5px 0 5px 5px;
  border: 1px solid gray;


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: 90px;


input:hover:-moz-placeholder,
input:focus:-moz-placeholder 
  /* Firefox 18- */
  padding-left: 90px;


input:hover::-moz-placeholder,
input:focus::-moz-placeholder 
  /* Firefox 19+ */
  padding-left: 90px;


input:hover:-ms-input-placeholder,
input:focus:-ms-input-placeholder 
  padding-left: 90px;

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

【讨论】：

我误解了你的问题。即将更新。