首页 > 软件开发 > HTML >

如何修改input placeholder属性中的字体样式

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

以往,我们在给input赋值时,一般会用value属性,但是当光标放入input中,却不能够使文本消息,这就需要用到placeholder属性了,那么如何给这个属性的默认值修改字体样式呢?qc8办公区 - 实用经验教程分享!

如何修改input placeholder属性中的字体样式qc8办公区 - 实用经验教程分享!

工具/原料

  • Visual Studio Code
  • input输入框
  • placeholder属性

方法/步骤

  • 1

    首先,我们先打开Visual Studio Code写HTML代码软件qc8办公区 - 实用经验教程分享!

    如何修改input placeholder属性中的字体样式qc8办公区 - 实用经验教程分享!

  • 2

    在当前写的HTML代码中插入input>标签,type属性为text,给placeholder赋值为“账户”qc8办公区 - 实用经验教程分享!

    如何修改input placeholder属性中的字体样式qc8办公区 - 实用经验教程分享!

  • 3

    然后开始对input输入框定义最基本的外观样式,例如边框,内阴影,边角,宽高,以及位置等属性qc8办公区 - 实用经验教程分享!

    如何修改input placeholder属性中的字体样式qc8办公区 - 实用经验教程分享!

  • 4

    这时就会发现如果对input定义color属性,并不会改变placeholder的字体颜色,所以就需要对其进行额外定义属性了。在样式中插入input::-webkit-input-placeholder,并定义color:redqc8办公区 - 实用经验教程分享!

    如何修改input placeholder属性中的字体样式qc8办公区 - 实用经验教程分享!

  • 5

    当然,只定义color属性是不够的,还可以定义字体大小和位置等qc8办公区 - 实用经验教程分享!

    如何修改input placeholder属性中的字体样式qc8办公区 - 实用经验教程分享!

  • 6

    为了能够使placeholder适配多种浏览器,我们可以对以上代码进行复制,并修改为moz、ms等,注意浏览器版本不同,input后跟随的【:】和【::】符号也是不同的哦qc8办公区 - 实用经验教程分享!

    如何修改input placeholder属性中的字体样式qc8办公区 - 实用经验教程分享!

  • 6本页面未经授权抓取自百度经验
  • 7

    最后我们input样式名称增加到html页面中,来看看生成的最终效果吧qc8办公区 - 实用经验教程分享!

    如何修改input placeholder属性中的字体样式qc8办公区 - 实用经验教程分享!

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


    标签: 编程语言HTMLCSS

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