首页 > 软件开发 > HTML >

CSS怎么修改placeholder颜色样式

来源:互联网 2023-03-16 19:18:58 501

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

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

工具/原料

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

方法/步骤

  • 1

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

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

  • 2

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

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

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

  • 3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • 4

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

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

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

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

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


    标签: CSSHTML网站

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