首页 > 软件开发 > CSS >

CSS怎么修改placeholder颜色样式

来源:互联网 2023-03-16 19:16:32 版权归原作者所有,如有侵权,请联系我们

我们在WEB开发的时候,经常会用到表单的placeholder属性!下面小编就和大家说说如何去修改placeholder的颜色样式nwU办公区 - 实用经验教程分享!

CSS怎么修改placeholder颜色样式nwU办公区 - 实用经验教程分享!

工具/原料

  • 开发工具:HBuilder X
  • 开发语言:CSS、HTML

方法/步骤

  • 1

    使用开发工具新建或打开您的【文档】nwU办公区 - 实用经验教程分享!

    CSS怎么修改placeholder颜色样式nwU办公区 - 实用经验教程分享!

  • 2

    创建一个表单输入框并添加【placeholder属性】nwU办公区 - 实用经验教程分享!

    示例代码:input class="input" type="text" placeholder="请输入..."/>nwU办公区 - 实用经验教程分享!

    CSS怎么修改placeholder颜色样式nwU办公区 - 实用经验教程分享!

  • 3

    给输入框添加CSS代码nwU办公区 - 实用经验教程分享!

    示例代码:nwU办公区 - 实用经验教程分享!

    input::-webkit-input-placeholder{nwU办公区 - 实用经验教程分享!

    color:#f00;nwU办公区 - 实用经验教程分享!

    }nwU办公区 - 实用经验教程分享!

    input::-moz-placeholder{ /* Mozilla Firefox 19 */nwU办公区 - 实用经验教程分享!

    color:#f00;nwU办公区 - 实用经验教程分享!

    }nwU办公区 - 实用经验教程分享!

    input:-moz-placeholder{ /* Mozilla Firefox 4 to 18 */nwU办公区 - 实用经验教程分享!

    color:#f00;nwU办公区 - 实用经验教程分享!

    }nwU办公区 - 实用经验教程分享!

    input:-ms-input-placeholder{ /* Internet Explorer 10-11 */nwU办公区 - 实用经验教程分享!

    color:#f00;nwU办公区 - 实用经验教程分享!

    }nwU办公区 - 实用经验教程分享!

    CSS怎么修改placeholder颜色样式nwU办公区 - 实用经验教程分享!

  • 4

    编写完,我们打开浏览器查看效果:nwU办公区 - 实用经验教程分享!

    CSS怎么修改placeholder颜色样式nwU办公区 - 实用经验教程分享!

  • 4该信息未经授权抓取自百度经验
  • 注意事项

    • tips:步骤三中,如果不考虑低版本浏览器 可以直接写input::placeholder{ color:#f00;}

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!nwU办公区 - 实用经验教程分享!


    标签: CSSHTML网站

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号