<style>
/* 通用 */
::-webkit-input-placeholder {
color: rgb(235, 126, 107);
}
::-moz-placeholder {
color: rgb(235, 126, 107);
} /* firefox 19+ */
:-ms-input-placeholder {
color: rgb(235, 126, 107);
} /* ie */
input:-moz-placeholder {
color: rgb(235, 126, 107);
} /* webkit专用 */
#field2::-webkit-input-placeholder {
color: rgb(235, 126, 107);
}
#field3::-webkit-input-placeholder {
color: rgb(235, 126, 107);
}
#field4::-webkit-input-placeholder {
color: rgb(235, 126, 107);
} /* mozilla专用 */
#field2::-moz-placeholder {
color: rgb(235, 126, 107);
}
#field3::-moz-placeholder {
color: rgb(235, 126, 107);
}
#field4::-moz-placeholder {
color: rgb(235, 126, 107);
}
</style>

chrome下测试效果图:

参考:HTML5中input背景提示文字(placeholder)的CSS美化

修改input placeholder样式的更多相关文章

  1. CSS - 修改input - placeholder 和 readonly 的样式

    placeholder ::-webkit-input-placeholder { /* WebKit browsers */ color: #999999; } :-moz-placeholder ...

  2. 修改 Input placeholder 的样式

    ::-webkit-input-placeholder { /* WebKit browsers */ color: #ccc; } :-moz-placeholder { /* Mozilla Fi ...

  3. [HTML] 动态修改input placeholder的颜色

    .invalid:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: red; } .invalid::-moz-placeholder { ...

  4. input placeholder样式

    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:red; } input:-moz-plac ...

  5. 修改input:file样式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. 使用<label>标签修改input[type="checkbox"]的样式

    因为<label>的特性有两点 : ①不呈现任何效果, ②用户点击该标签, 浏览器能自动将焦点转移到相关的表单控件上. <form> <input type=" ...

  7. 修改input属性placeholder的样式

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. HTML 使用CSS 如何去掉文本聚焦框 HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input、textarea输入框placeholder样式

    HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input.textarea输入框placeholder样式  兼容性代码: input::-webkit-input ...

  9. HTML5 input placeholder 颜色修改示例

    Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: CSS 复制代码 代码如下: input[placeholder], [placeholder], *[p ...

随机推荐

  1. 数据库——SQL数据连接查询

    连接查询 查询结果或条件涉及多个表的查询称为连接查询SQL中连接查询的主要类型     广义笛卡尔积     等值连接(含自然连接)     自身连接查询     外连接查询 一.广义笛卡尔积 不带连 ...

  2. 20181204-2 Final发布

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2476 小组介绍 组长:付佳 组员:张俊余 李文涛 孙赛佳 田良 于洋 段 ...

  3. Linux内核分析 一二章读书笔记

    第一章 Linux内核简介 1.Unix (1)Unix系统很简洁 (2)在Unix中,所以东西都被当作文件对待,通过一套相同的系统调用接口来进行:open(),read(),write(),lsee ...

  4. 专业实训题目需求分析(3D推箱子)

    业务需求:    游戏提供主菜单让玩家进行游戏设置.帮助说明,推箱子的小人可以前后左右转动,箱子可以被上下左右的推动,要有关卡设置,障碍物设置,游戏提供背景音乐的功能,要实现3D效果. 面向的用户类型 ...

  5. Daily Scrum – 12/10

    Meeting Minutes 完了了部分页面设计,可能是没有完成的原因,感觉好丑= =: 完成了调整速度的条: 讨论了页面翻转的实现方式,以及可能的简化方式: 进一步整合各个组件: 改进页面上移的按 ...

  6. C# Stopwatch获取循环中某操作的时间消耗

    在C#中通常使用DateTime来表示当前时间,可以在一个操作的前后分别使用一个DateTime对象获取当前时间,再将两个DateTime对象相减获得时间差(TimeSpan对象),从而得到这个操作耗 ...

  7. Http建立连接的方式

    1.协议简介 Http 协议:应用层协议 TCP 协议:传输层协议,主要解决如何在IP层之上可靠的传递数据包,使在网络上的另一端收到发端发出的所有包,并且顺序与发出的顺序一致,TCP具有可靠,面向连接 ...

  8. 自学Zabbix3.10.1.5-事件通知Notifications upon events-媒介类型Script

    点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 自学Zabbix3.10.1.5-事件通知Notifications upon events-媒介 ...

  9. 【ZJOI2015】诸神眷顾的幻想乡 解题报告

    [ZJOI2015]诸神眷顾的幻想乡 Description 幽香是全幻想乡里最受人欢迎的萌妹子,这天,是幽香的2600岁生日,无数幽香的粉丝到了幽香家门前的太阳花田上来为幽香庆祝生日. 粉丝们非常热 ...

  10. mybatis ${}与#{}的区别

    #{}可以直接获取方法的参数: ${}从方法的参数中利用get方法来获取参数的属性值: