输入框placeholder字体

CSS:

input[type="text"]::-webkit-input-placeholder{color:red;opacity:1;}/* WebKit browsers */
input[type="text"]:-moz-placeholder{color:red;opacity:1;}/* Mozilla Firefox 4 to 18 */
input[type="text"]::-moz-placeholder{color:red;opacity:1;}/* Mozilla Firefox 19+ */
input[type="text"]:-ms-input-placeholder{color:red;opacity:1;}/* Mozilla Firefox 19+ */

效果:

输入框placeholder字体_第1张图片


解析:

placeholder存在兼容性问题,只有支持placeholder的浏览器才可以设置其样式;
opacity:为透明度;默认半透明;取值范围0-1;
placeholder的字体继承数据框的样式;
例如:input{font-size: 22px;} 则placeholder的字号为22px

不支持placeholder的浏览器要定义类似的效果,需要自己用dom模拟 查看样例


ps:鉴于个人经验有限,所有观点,如有异议,请直接回复讨论(请勿发表攻击言论)。
加入QQ群209952809(需回答问题,答案为csdn);群聊更快解决问题,更happy。

你可能感兴趣的:(html,css,前端面试,浏览器兼容,css,placeholde)