• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > CSS如何修改placeholder的颜色

CSS如何修改placeholder的颜色

作者:站长图库 字体:[增加 减小] 来源:互联网

站长图库向大家介绍了CSS如何修改,placeholder颜色等相关知识,希望对您有所帮助

方法:先使用“::placeholder”选择器选中需要修改的元素;然后给该元素添加“color:颜色值;”样式即可。注placeholder是css3新增的选择器,在不同的浏览器需要加不同的前缀(“-ms-”,“ -webkit-”等)。


CSS如何修改placeholder的颜色


placeholder这个属性是HTML5中新增的属性,作用是描述输入字段预期值的提示信息

如何修改placeholder的颜色呢?

但是存在一定的浏览器兼容问题,以chorme为例:

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <style>         input::-webkit-input-placeholder {        color: #aab2bd;        font-size: 12px;    }    input {//边框效果        border: 1px solid red;    }    </style></head><body>         <input type="text" placeholder="请输入">     </body></html>

chorme浏览器对应的选择器是

input::-webkit-input-placeholder

其他浏览器的选择器如下:

input::-webkit-input-placeholder { /* WebKit, Blink, Edge */    color : red;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */   color : red;}::-moz-placeholder { /* Mozilla Firefox 19+ */   color : red;}input:-ms-input-placeholder { /* Internet Explorer 10-11 */   color : red;}input::-ms-input-placeholder { /* Microsoft Edge */   color : red;}

WebKit, Blink, Edge浏览器等需要带上-webkit-前缀,且是双冒号,写的时候还要带上input

针对火狐浏览器则有两种写法,都需要带上-moz-前缀。火狐低版本的使用冒号(:),而高版本的使用双冒号(::);火狐浏览器不需要带上input。

placeholder属性只在IE10+才支持,IE10、IE11的写法是加上-ms-前缀,使用的是冒号(:),需要带上input



分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • CSS如何修改placeholder的颜色

相关文章

  • PHP中$_SESSION获取不到值怎么办
  • inner join用法是什么
  • CorelDraw实例教程:放射线效果另类做法
  • 发外链的pr比较高的论坛,不过要手工
  • ThinkPHP5通过ajax插入图片并实时显示(完整代码)
  • CSS对SEO有影响吗
  • 正则表达式中两个反斜杠的匹配规则详解
  • MySQL 日期加减函数汇总
  • ThinkPHP3.2.3如何从php5升级到php7
  • 三种ThinkPHP6中获取参数的方法

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • PS制作质感的立体字
    • 无需借助其他软件或者插件实现Chrome网页长截图
    • Laravel学习记录之强制指定索引进行查询
    • 聊聊Bootstrap5中的断点与容器
    • 用HeheCloud快速搞个Wordpress应用!
    • 使用JS或CSS如何实现瀑布流布局,几种方案介绍
    • PHPcms远程图片本地化增加图片类型和后缀的方法
    • 了解Ajax Session失效跳转登录页面的方法
    • 将phpcms默认ckeditor编辑器换成KindEditor
    • PHP怎么设置上传图片大小

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有