如何修改placeholder样式

网页上很多文本框中都自带提示内容，这个提示内容可以直接使用placeholder进行提示设置，很多浏览器都支持placeholder提示，那么如何设置placeholder的样式呢？
设置input样式代码：
input::-webkit-input-placeholder{ /*WebKit browsers*/
color: red;
}
input::-moz-input-placeholder{ /*Mozilla Firefox*/
color: red;
}
input::-ms-input-placeholder{ /*Internet Explorer*/
color: red;
}

操作方法

  • 01

    新建html文件，在html文件中输入input标签然后给标签添加placeholder值。如图： 代码：<input type="text" placeholder="请输入用户名"  />

  • 02

    保存好html页面后使用浏览器打开，发现input输入框提示的文字是灰色的。

  • 03

    修改提示文字颜色。创建style标签，在这个标签里设置提示框文字的颜色。 如图： 代码： <style type="text/css"> input::-webkit-input-placeholder{ /*WebKit browsers*/ color: red; } input::-moz-input-placeholder{ /*Mozilla Firefox*/ color: red; } input::-ms-input-placeholder{ /*Internet Explorer*/ color: red; } </style>

  • 04

    保存html文件后使用浏览器打开，发现提示文字颜色已变为红色。如图：

  • 05

    所有代码。可以直接把所有代码复制到新建的html文件上，保存后运行即可看到效果。 所有代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> input::-webkit-input-placeholder{ /*WebKit browsers*/ color: red; } input::-moz-input-placeholder{ /*Mozilla Firefox*/ color: red; } input::-ms-input-placeholder{ /*Internet Explorer*/ color: red; } </style> </head> <body> <input type="text" placeholder="请输入用户名"  /> </body> </html>

赞 (0)

相关推荐

  • 在Word2003中修改Word样式

    在Word2003中修改Word样式

    在Word中应用样式后,当以后要对某个文字的样式进行修改时,只需修改所应用的样式,即可实现对应用了此样式的所有文字的内容的修改.在Word2003中修改Word样式的步骤如下所述:第1步,首先需要选择 ...

  • Word2013如何批量修改标题样式成统一格式

    Word2013批量修改标题样式成统一格式步骤如下: 打开修改菜单 1打卡Word2013文档,在你需要修改的标题里头,对着该标题右键,点击"修改".如图所示. 2在弹出的菜单里头 ...

  • Word2013怎么修改文字样式

    Word2013修改文字样式的方法: ①首先启动Word2013,输入文字,单击菜单栏--开始--样式. ②然后在样式中选择一种样式. ③可以看到文字的样式已经发生变化. ④如果要清除格式,单击箭头选 ...

  • win11系统怎么修改指针样式

    win11系统怎么修改指针样式

    现在有越来越多人在使用win11系统,有些新用户不知道怎么修改指针样式,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步根据下图箭头所指,点击左下角[开始]图标.2. 第二步在弹出 ...

  • 如何解决AI修改符号样式自动保存问题

    如何解决AI修改符号样式自动保存问题

    AI是现在十分常用的一款矢量插画软件,有些用户遇到了修改符号样式自动保存问题,想知道如何解决,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步先打开电脑中的AI软件,接着根据下图箭 ...

  • AutoCAD如何修改标注样式

    AutoCAD如何修改标注样式

    AutoCAD是现在十分常用的一款制图软件,有些新用户不知道该软件如何修改标注样式,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步先打开电脑中的AutoCAD软件,接着根据下图所 ...

  • AutoCAD如何修改文字样式

    AutoCAD如何修改文字样式

    AutoCAD是现在十分常用的一款制图软件,有些新用户不知道该软件如何修改文字样式,接下来小编就给大家介绍一下具体的操作步骤.具体如下:1. 首先第一步先打开电脑中的AutoCAD软件,接着根据下图箭 ...

  • 如何修改标题样式

    Word在日常生活中随处都可以用到,但是在使用过程中总是会遇到一些小麻烦,接下来教大家在Word中如何修改标题样式 操作方法 01 首先双击左键打开Word,在Word中输入几个汉字 02 选中标题, ...

  • CAD2010怎样新建和修改文字样式

    在CAD中我们会经常新建和修改文字样式,所以在这里给大家简单的介绍一下,希望对大家有帮助. 操作方法 01 打开CAD2010的版本,界面就是这个样子的. 02 然后点击注释-管理文字样式,就在图中所 ...