css的表单按钮类型

在CSS中，表单按钮是一种常见的元素类型，用于在Web应用程序中接受用户输入和提交表单数据。在CSS中，表单按钮有多种不同的类型，可以通过CSS样式来进一步自定义其外观和行为。 下面列举了一些常见的表单按钮类型及其CSS样式： 1. 普通按钮 (type="button")：

这是一个普通按钮：

button {
  background-color: #4CAF50;
 /* 绿色背景 */
  border: none;
  color: white;
 /* 白色文字 */
  padding: 15px 32px;
 /* 按钮内边距 */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
 

2. 提交按钮 (type="submit")：

这是一个提交按钮：

input[type="submit"] {
  background-color: #4CAF50;
 /* 绿色背景 */
  border: none;
  color: white;
 /* 白色文字 */
  padding: 15px 32px;
 /* 按钮内边距 */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
 

3. 重置按钮 (type="reset")：

这是一个重置按钮：

input[type="reset"] {
  background-color: #f44336;
 /* 红色背景 */
  border: none;
  color: white;
 /* 白色文字 */
  padding: 15px 32px;
 /* 按钮内边距 */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
 

4. 带图标的按钮：

这是一个带有图标的按钮：

button.icon {
  background-image: url('icon.png');
 /* 图标 */
  background-size: 20px 20px;
  background-repeat: no-repeat;
  padding-left: 50px;
 /* 图标偏移量 */
}
 

除了以上列举的几种表单按钮类型，还有一些其他的类型，如单选框、多选框、下拉框等。需要注意的是，在使用CSS样式时，应该尽可能地保持样式的统一性和一致性，以提高用户体验和界面美感。