修改placeholder提示内容的颜色以及文本框输入文字内容的颜色

时间:2022-01-28 12:59:00

一般表单文本框提示信息:placeholder=" ",默认颜色是灰色的,输入文本信息也是默认为黑色的,如图所示:

修改placeholder提示内容的颜色以及文本框输入文字内容的颜色

修改placeholder提示内容的颜色以及文本框输入文字内容的颜色

修改placeholder提示内容的颜色关键代码及实现:

修改placeholder提示内容的颜色以及文本框输入文字内容的颜色

修改placeholder提示内容的颜色以及文本框输入文字内容的颜色

实现输入的时候字体颜色变成其他颜色(如红色)的关键代码及实现:

修改placeholder提示内容的颜色以及文本框输入文字内容的颜色

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#name:focus{
color:red;
}
#password:focus{
color:#FFA015;
}
input::-webkit-input-placeholder{
color:pink;
}
input:-moz-placeholder{
color:pink;
}
</style>
</head>
<body>
<form>
<label for="male">姓名:</label>
<input type="text" id="name" placeholder=" 请输入您的姓名"/>
<label for="male">密码:</label>
<input type="password" id="password" placeholder="请输入您的密码"/> </form>
</body>
</html>