通过css3设置html5 placeholder字体样式

  • 时间:2018-07-02 22:48 作者:专注做前端 来源:专注做前端 阅读:414
  • 扫一扫,手机访问
摘要:关注本头条号,专注做前台。仍然记得在html5推行出来之前,做网页前台的日子,还需要JS来写才可以实现placeholder效果,自从htm5出来以后,这个工作的内容双手就基本被解放了我们只知道placeholder的字体颜色会比输入字体颜色淡一点,但是,如何去设置一个placeholder的颜色呢

关注本头条号,专注做前台。

通过css3设置html5 placeholder字体样式

仍然记得在html5推行出来之前,做网页前台的日子,还需要JS来写才可以实现placeholder效果,自从htm5出来以后,这个工作的内容双手就基本被解放了

我们只知道placeholder的字体颜色会比输入字体颜色淡一点,但是,如何去设置一个placeholder的颜色呢? 通过下面的方法:

/* 通使用 */::-webkit-input-placeholder { color:#f00; }::-moz-placeholder { color:#f00; } /* firefox 19+ */:-ms-input-placeholder { color:#f00; } /* ie */input:-moz-placeholder { color:#f00; }/* webkit专使用 */#field2::-webkit-input-placeholder { color:#00f; }#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }/* mozilla专使用 */#field2::-moz-placeholder { color:#00f; }#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

考虑兼容性,要写很多个版本,相信在将来更规范以后,这个问题会得到处理

//

无实战,不前台——切图学院

报名地址:http://qietu.net

  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】树莓派安装TensorFlow(2020-04-24 21:11)
【系统环境|服务器应用】防面试-SD_WebImage(2020-04-24 21:11)
【系统环境|服务器应用】推荐一款视频控件xgplayer(2020-04-24 21:11)
【系统环境|服务器应用】PostgreSQL 源码解读(27)- 查询语句#12(查询优化-上拉子链接#2)(2020-04-24 21:11)
【系统环境|服务器应用】如何轻松学习JavaScript?(2020-04-24 21:10)
【系统环境|服务器应用】【源码剖析】Launcher 8.0 源码 (12) --- Launcher 启动流程 第五步之计算桌面各布局细节参数(2020-04-24 21:10)
【系统环境|服务器应用】前台碰撞室之console.log与文本字符(2020-04-24 21:10)
【系统环境|服务器应用】好用的Middleware实现(2020-04-24 21:10)
【系统环境|服务器应用】前台面试每日 3+1 —— 第373天(2020-04-24 21:10)
【系统环境|服务器应用】绍圣--kafka之生产者(五)(2020-04-24 21:10)
手机二维码手机访问领取大礼包
返回顶部