上一篇
html如何给表单换颜色
要给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>
现在，表单的背景颜色、内边距、圆角等已经改变，标签和输入框之间的间距也有所调整，提交按钮的背景颜色、文字颜色、边框等也进行了自定义。
本站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本站，有问题联系侵删！
本文链接：http://www.xixizhuji.com/fuzhu/293582.html
