input提示文字；placeholder字体修改

在很多网站上我们都看到input输入框显示提示文字，让我们一起来看看如果在input输入框中显示提示文字。我们只需要在<input>标签里添加：placeholder="提示文字即可"。
语法: <input
placeholder="提示文字即可" />

操作方法

  • 01

    新建一个html文件。如图：

  • 02

    在html文件里找到<body>标签，在这个标签里面输入文本框代码：<input type="text" />。 如图

  • 03

    设置提示文字。在input标签里添加： placeholder="请输入用户名"  。如图

  • 04

    查看效果。保存html文件后使用浏览器打开查看提示效果。如图

  • 05

    修改文本提示字体样式（修改字体的颜色，其他样式的修改方式也一样。）。回到html代码文件，设置placeholder的样式，样式代码： <style> /*修改提示文字的颜色*/ input::-webkit-input-placeholder { /* WebKit browsers */ color: red; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: red; } input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: red; } input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: red; } </style>

  • 06

    使用浏览器查看效果。保存html文件后使用浏览器打开，发现提示字体已经变成红色了。如图：

  • 07

    html所有代码。可新建一个html文件，然后把以下代码复制到新建的html文件上，保存后即可使用浏览器查看效果。 所有代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>input输入框提示文字</title> <style> /*修改提示文字的颜色*/ input::-webkit-input-placeholder { /* WebKit browsers */ color: red; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: red; } input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: red; } input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: red; } </style> </head> <body> <input type="text" placeholder="请输入用户名" /> </body> </html>

赞 (0)

相关推荐

  • placeholder字体颜色怎么设置修改

    我们知道placeholder很方便,但是有时候想更改placeholder字体颜色却不知道怎么搞.下面小编就来介绍一下placeholder字体颜色怎么设置修改. 操作方法 01 首先我们先简单写个 ...

  • win8.1怎么修改标题栏和提示框的字体

    win8.1怎么修改标题栏和提示框的字体 1.按下"Win+X"组合键呼出系统快捷菜单,点控制面板; 2.在控制面板点击"外观和个性化"; 3.选择" ...

  • AI教程：[71]如何修改文字的字体以及字号

    AI是很多人都喜欢用的设计软件之一,小编学习设计初期就是使用的AI软件,今天小编为你详细介绍下:AI教程:如何修改文字的字体以及字号. 操作方法 01 双击AI图标,打开我们的AI软件,如图所示. 0 ...

  • Word2010如何实现鼠标指向自动显示提示文字

    在对Word文档进行操作时，经常需要给一些关键地方添加提示文字，但又不能让提示影响到原文的视图和打印效果。因此想让提示文字只在鼠标靠近时自动显示，当鼠标移开时就得自动消失。请问在Word中是否有办法可 ...

  • 如何修改wow字体 修改魔兽世界默认字体的方法

    字体在各大WOW网站的插件区都有下载,下面介绍如何安装字体 操作方法 01 第一步: 进入魔兽世界安装目录下的FONTS目录,如果没有此目录,新建一个名为FONTS的目录: 02 第二步: 复制一个你 ...

  • iphone4s怎么改字体?iphone4s字体修改教程[图文讲解]

    大家都知道苹果手机如果没有越狱的话是不能改字体的，其实iphone可以轻松换字体，而且系统内多余的字体也可以删掉，以节省系统宝贵的空间。 那么iphone4s越狱后怎么改字体吗？ 首先，我们需要了解， ...

  • wps文字中字体怎么设置

    wps文字设置字体的方法: 第一步 打开wps 第二步 选中你要修改的字体 单击右键 点击 字体 第三步 选择你需要的字体字号和颜色 就可以了 最后 来看看我们的效果图吧 你学会了么?

  • AE模板源文件中的文字该怎么修改?

    Adobe After Effects简称“AE”,是Adobe公司推出的一款图形视频处理软件,适用于从事设计和视频特技的机构,包括电视台.动画制作公司.个人后期制作工作室以及多媒体工作室.为节省制作 ...

  • 电脑cad软件中文字大小怎么修改

    电脑cad软件中文字大小怎么修改

    有的小伙伴在电脑上使用CAD软件时,想要修改文字大小,但是却不知道如何修改,那么小编就来为大家介绍一下吧.具体如下:1. 第一步,双击或者右击打开CAD软件,接着打开含有文字的文档,然后双击需要修改大 ...