input输入框placeholder的颜色、光标

2,168 阅读1分钟

1、placeholder的颜色

placeholder为html5新增属性,支持IE10+,谷歌,火狐...

html

<input type="text" placeholder="输入...">

css

input::-webkit-input-placeholder{
  color:red;
}
input::-moz-placeholder{
  color:red;
} // firefox 19+
input:-moz-placeholder{
  color:red;
} // firefox 4-18
input:-ms-input-placeholder{
  color:red;
} // ie 10-11

2、光标位置、placeholder位置

光标居左,placeholder居中 css

input{
    width: 100px;
    padding; 0 25px;
}

input::-webkit-input-placeholder{
    padding-left: 25px;
}

③获取焦点后居右,失去焦点时居左

input{
    text-align: center;
}
input:focus{
    text-align:left
}