修改input placeholder样式
<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样式的更多相关文章
- CSS - 修改input - placeholder 和 readonly 的样式
placeholder ::-webkit-input-placeholder { /* WebKit browsers */ color: #999999; } :-moz-placeholder ...
- 修改 Input placeholder 的样式
::-webkit-input-placeholder { /* WebKit browsers */ color: #ccc; } :-moz-placeholder { /* Mozilla Fi ...
- [HTML] 动态修改input placeholder的颜色
.invalid:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: red; } .invalid::-moz-placeholder { ...
- input placeholder样式
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:red; } input:-moz-plac ...
- 修改input:file样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 使用<label>标签修改input[type="checkbox"]的样式
因为<label>的特性有两点 : ①不呈现任何效果, ②用户点击该标签, 浏览器能自动将焦点转移到相关的表单控件上. <form> <input type=" ...
- 修改input属性placeholder的样式
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML 使用CSS 如何去掉文本聚焦框 HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input、textarea输入框placeholder样式
HTML 使用CSS 如何去掉文本聚焦框 : outline 值设为none 修改input.textarea输入框placeholder样式 兼容性代码: input::-webkit-input ...
- HTML5 input placeholder 颜色修改示例
Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: CSS 复制代码 代码如下: input[placeholder], [placeholder], *[p ...
随机推荐
- 数据库——SQL数据连接查询
连接查询 查询结果或条件涉及多个表的查询称为连接查询SQL中连接查询的主要类型 广义笛卡尔积 等值连接(含自然连接) 自身连接查询 外连接查询 一.广义笛卡尔积 不带连 ...
- 20181204-2 Final发布
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2476 小组介绍 组长:付佳 组员:张俊余 李文涛 孙赛佳 田良 于洋 段 ...
- Linux内核分析 一二章读书笔记
第一章 Linux内核简介 1.Unix (1)Unix系统很简洁 (2)在Unix中,所以东西都被当作文件对待,通过一套相同的系统调用接口来进行:open(),read(),write(),lsee ...
- 专业实训题目需求分析(3D推箱子)
业务需求: 游戏提供主菜单让玩家进行游戏设置.帮助说明,推箱子的小人可以前后左右转动,箱子可以被上下左右的推动,要有关卡设置,障碍物设置,游戏提供背景音乐的功能,要实现3D效果. 面向的用户类型 ...
- Daily Scrum – 12/10
Meeting Minutes 完了了部分页面设计,可能是没有完成的原因,感觉好丑= =: 完成了调整速度的条: 讨论了页面翻转的实现方式,以及可能的简化方式: 进一步整合各个组件: 改进页面上移的按 ...
- C# Stopwatch获取循环中某操作的时间消耗
在C#中通常使用DateTime来表示当前时间,可以在一个操作的前后分别使用一个DateTime对象获取当前时间,再将两个DateTime对象相减获得时间差(TimeSpan对象),从而得到这个操作耗 ...
- Http建立连接的方式
1.协议简介 Http 协议:应用层协议 TCP 协议:传输层协议,主要解决如何在IP层之上可靠的传递数据包,使在网络上的另一端收到发端发出的所有包,并且顺序与发出的顺序一致,TCP具有可靠,面向连接 ...
- 自学Zabbix3.10.1.5-事件通知Notifications upon events-媒介类型Script
点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 自学Zabbix3.10.1.5-事件通知Notifications upon events-媒介 ...
- 【ZJOI2015】诸神眷顾的幻想乡 解题报告
[ZJOI2015]诸神眷顾的幻想乡 Description 幽香是全幻想乡里最受人欢迎的萌妹子,这天,是幽香的2600岁生日,无数幽香的粉丝到了幽香家门前的太阳花田上来为幽香庆祝生日. 粉丝们非常热 ...
- mybatis ${}与#{}的区别
#{}可以直接获取方法的参数: ${}从方法的参数中利用get方法来获取参数的属性值: