📅 最后修改于: 2023-12-03 15:28:32.899000 🧑 作者: Mango
在许多情况下，表单元素的默认样式可能无法满足我们的需求。为了自定义表单样式，我们需要使用CSS来覆盖默认样式并为表单元素应用我们自己的样式。
然而，在大多数浏览器中，每个表单元素都有其自己的一组默认样式。这使得固定样式表变得非常困难。在这种情况下，重置表单元素样式通常是更好的选择，因为它们将所有表单元素都返回到一个共同的起点，并从那里重新开始自定义。
下面是一个基本的CSS重置表单的例子：
input,
button,
textarea,
select {
margin: 0;
padding: 0;
border: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
此代码片段将所有表单元素（input，button，textarea，select）的默认样式设置为0，以便我们可以从头开始为它们设计自适应样式。
下面是一个更完整的示例，可以重置表单元素的样式并自定义它们的外观。
<!DOCTYPE html>
<html>
<head>
<title>Reset CSS Form Styles</title>
<style>
/* Reset Form Styles */
input,
button,
textarea,
select {
margin: 0;
padding: 0;
border: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
/* Custom Form Styles */
input[type="submit"],
input[type="reset"],
input[type="button"] {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 6px;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
background-color: #3e8e41;
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
}
/* form layout */
.form-container {
display: flex;
flex-direction: column;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group label {
margin-bottom: 8px;
}
</style>
</head>
<body>
<div class="form-container">
<form>
<h2>Sign Up</h2>
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter username">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter password">
</div>
<div class="form-group">
<label for="confirm-password">Confirm Password:</label>
<input type="password" id="confirm-password" name="confirm-password" placeholder="Re-enter password">
</div>
<div class="form-group">
<input type="submit" value="Sign Up">
</div>
</form>
</div>
</body>
</html>
此示例代码包括一个包含更多自定义表单样式的HTML表单和CSS代码，以帮助您开始自定义表单元素。此外，我们还为表单添加了灵活的布局，并为表单元素添加了必要的HTML属性，如“name”和“id”。
通过重置默认表单样式，我们可以更轻松地自定义表单元素的样式并应用我们自己的样式。希望这篇文章能够帮助你了解如何重置表单元素的样式。