如何修改placeholder样式

2025-10-31 19:26:18

1、新建html文件,在html文件中输入input标签然后给标签添加placeholder值。如图:

代码:<input type="text" placeholder="请输入用户名"  />

如何修改placeholder样式

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

如何修改placeholder样式

3、修改提示文字颜色。创建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>

如何修改placeholder样式

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

如何修改placeholder样式

5、所有代码。可以直接把所有代码复制到新建的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>

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢