• 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的颜色

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了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的颜色

相关文章

  • 2022-04-29JavaScript事件之事件冒泡与时间捕获(总结分享)
  • 2022-04-29WordPress教程:WordPress博客添加自定义鼠标样式
  • 2022-04-29利用CSS如何实现全兼容的毛玻璃效果?
  • 2022-04-29技术教程:如何安装ioncube扩展
  • 2022-04-29PHP怎么上传图片改文件名
  • 2022-04-29PHP7如何使用set_error_handler和set_exception_handler处理异常机制
  • 2022-04-29css中&表示什么意思
  • 2022-04-29详解vue2项目优雅封装echarts地图的方法
  • 2022-04-29PHP怎么将错误输出到文件
  • 2022-04-29完美实现CSS垂直居中的11种方法

文章分类

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

最近更新的内容

    • PHP怎么将整数转为浮点数类型
    • PHP版抖音去水印代码
    • PS简单制作蓝色梦幻的透明2012字效壁纸效果教程
    • 简单对比Node中的setHeader和writeHead,聊聊差异
    • dedecms页面获取会员状态的代码
    • MacOS下PHP7.1升级到PHP7.4.15的方法
    • 在CSS中怎么给按钮添加背景图片(详解及实例)
    • ThinkPHP中自定义错误、成功、异常提示页面的方法
    • PHP调用实现波场交互[支持TRX/TRC20]
    • 让dedecms友情链接也支持limit

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

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