HTML CSS 表单样式

HTML 表单的样式可以通过CSS来美化。

可以通过属性选择来分别设置不同属性input的样式
input[type=text] – 将仅选择文本字段
input[type=password] – 将仅选择密码字段
input[type=number] – 将仅选择数字字段
等等

<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid red;
  border-radius: 4px;
  background-color: #3CBC8D;
  color: white;
  outline: none;
  transition: width 0.4s ease-in-out;

  background-image: url('logo.png');
  background-position: 10px 10px; 
}

input[type=text]:focus {
  background-color: lightblue;
}

textarea {
  resize: none;
}

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
/* 提示：请使用  width: 100%，以实现全宽按钮 */
</style>

width：用来设置字段的宽度
padding：用来设置input在文本字段内添加间距
margin：用来设置input的外间距
box-sizing 属性允许我们在元素的总宽度和高度中包括内边距（填充）和边框。
请注意，我们已将 box-sizing 属性设置为 border-box。这样可以确保元素的总宽度和高度中包括内边距（填充）和最终的边框。
border：用来设置input的边框
请注意，如果仅需要下边框，请使用 border-bottom 属性
border-radius：用来设置input的边框的圆角
background-color：用来给input添加背景色
color：用来更改input文本颜色
outline: none 某些浏览器在获得焦点（单击）时会在输入框周围添加蓝色轮廓，该设置则是取消这一样式
background-image：用来设置input里添加图案
background-position：设置图案后还需要设置该属性来留出图标所需要的位置
transition：用来设置获得焦点时的宽度变化的动画效果

:focus 选择器可以在输入字段获得焦点时为其设置样式

resize：可以禁止调整 input textareas 的大小（禁用右下角的“抓取器”）

select：用来设置input select 选择菜单的样式

input[type=button], input[type=submit], input[type=reset]：用来设置input 按钮的样式

如果你发现错误或有其他见解，请给www.zhuei.com留言，我们会尽快更新本文！