要给HTML表单换颜色，可以使用CSS样式，以下是详细步骤：
（图片来源网络，侵删）
1、在HTML文件中创建一个表单。
<!DOCTYPE html>
<html>
<head>
<title>表单换色</title>
</head>
<body>
<form>
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="提交">
</form>
</body>
</html>
2、接下来，为表单添加CSS样式，可以在<head>标签内添加<style>标签，或者将CSS代码放在一个单独的文件中，然后在HTML文件中引用该文件，这里我们直接在HTML文件中添加CSS代码：
<!DOCTYPE html>
<html>
<head>
<title>表单换色</title>
<style>
form {
backgroundcolor: lightblue; /* 设置表单背景颜色 */
padding: 20px; /* 设置表单内边距 */
borderradius: 5px; /* 设置表单圆角 */
}
label, input {
display: block; /* 将标签和输入框设置为块级元素 */
marginbottom: 10px; /* 设置标签和输入框之间的间距 */
}
input[type="submit"] {
backgroundcolor: blue; /* 设置提交按钮的背景颜色 */
color: white; /* 设置提交按钮的文字颜色 */
border: none; /* 移除提交按钮的边框 */
padding: 5px 10px; /* 设置提交按钮的内边距 */
cursor: pointer; /* 设置鼠标悬停时的指针样式 */
}
input[type="submit"]:hover {
backgroundcolor: darkblue; /* 设置鼠标悬停时提交按钮的背景颜色 */
}
</style>
</head>
<body>
<form>
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="提交">
</form>
</body>
</html>
现在，表单的背景颜色、内边距、圆角等已经改变，标签和输入框之间的间距也有所调整，提交按钮的背景颜色、文字颜色、边框等也进行了自定义。
原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/392842.html
微信扫一扫