CSS初级项目表单样式如何美化_Input select checkbox表单统一风格使用方法

/* 重置表单元素默认样式 */
input, select, checkbox {
  box-sizing: border-box;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 14px;
  outline: none;
  border: 1px solid #ccc;
  padding: 8px 12px;
  border-radius: 4px;
}

input[type="text"], select {
  width: 100%;
  transition: border-color 0.3s;
}
<p>input[type="text"]:focus,
select:focus {
border-color: #409eff;
box-shadow: 0 0 5px rgba(64, 158, 255, 0.3);
}</p><p>/<em> 自定义 select 下拉箭头 </em>/
select {
appearance: none;
background-image: url("data:image/svg+xml;charset=US-ASCII,...");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 30px;
}</p>

.custom-checkbox {
  display: none;
}
<p>.custom-checkbox + label {
position: relative;
cursor: pointer;
padding-left: 30px;
line-height: 18px;
}</p><p>.custom-checkbox + label::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 18px;
height: 18px;
border: 1px solid #ccc;
border-radius: 3px;
background-color: #fff;
}</p><p>.custom-checkbox:checked + label::after {
content: "✔";
position: absolute;
left: 4px;
top: 1px;
color: #409eff;
font-size: 14px;
}</p>

<input type="checkbox" id="agree" class="custom-checkbox">
<label for="agree">我同意用户协议</label>

input.error, select.error {
  border-color: #f56c6c;
}
input.error:focus {
  box-shadow: 0 0 5px rgba(245, 108, 108, 0.3);
}