小洛的前端技术博客Appearance
placeholder样式
TIP
placeholder这个输入框的提示信息有时候需要根据设计的样式来改动，比如颜色，字体大小等，但是placeholder是只读的，不能直接修改，所以需要通过伪类来修改样式。还有一个浏览器的兼容性问题需要加前缀,不同浏览器需使用特定前缀（如::-webkit-、::-moz-）
css
/* 统一各浏览器占位文本样式 */
.input::-webkit-input-placeholder { /* Chrome/Safari/Opera */
color: #babbc1;
font-size: 12px;
}
.input::-moz-placeholder { /* Firefox 19+ */
color: #babbc1;
font-size: 12px;
opacity: 1; /* Firefox默认透明度为0.5 */
}
.input:-ms-input-placeholder { /* IE 10+ */
color: #babbc1;
font-size: 12px;
}
.input::placeholder { /* 标准语法（必须放最后） */
color: #babbc1;
font-size: 12px;
}/* 统一各浏览器占位文本样式 */
.input::-webkit-input-placeholder { /* Chrome/Safari/Opera */
color: #babbc1;
font-size: 12px;
}
.input::-moz-placeholder { /* Firefox 19+ */
color: #babbc1;
font-size: 12px;
opacity: 1; /* Firefox默认透明度为0.5 */
}
.input:-ms-input-placeholder { /* IE 10+ */
color: #babbc1;
font-size: 12px;
}
.input::placeholder { /* 标准语法（必须放最后） */
color: #babbc1;
font-size: 12px;
}