Skip to content

美化表单元素

新的伪类

  1. focus

元素聚焦时的样式

css
input {
  color: #999;
}
input:focus {
  outline: 1px solid #008c8c;
  outline-offset: 0;
  color: #000;
}
  1. checked 单选或多选框被选中的样式 单选和勾选框的选中状态几乎很少改变,我们一般使用 checked 伪类来自己实现单选框。
css
:checked {
  background-color: red;
}
html
<p>
  <input id="radmale" name="gender" type="radio" />
  <label for="radmale">男</label>

  <input id="radfemale" name="gender" type="radio" />
  <label for="radfemale">女</label>
</p>
css
input:checked + label {
  color: red;
}
  1. :placeholder
css
::placeholder {
  color: #ccc;
}
  1. :disabled
css
:disabled {
  background-color: #eee;
  cursor: not-allowed;
}

常见用法

  1. 重置表单元素样式

  2. 设置 textarea 是否允许调整尺寸

css 属性 resize:

  • both:默认值,两个方向都可以调整尺寸
  • none:不能调整尺寸
  • horizontal: 水平方向可以调整尺寸
  • vertical:垂直方向可以调整尺寸
css
textarea {
  resize: horizontal;
}
  1. 文本框边缘到内容的距离
css
/* 方式1:padding */
/* input {
            padding:0 10px;
        } */
/* 方式2:text-indent */
input,
textarea {
  text-indent: 1em;
}
  1. 控制单选和多选的样式 写一个漂亮的单选框
html
<div class="radio checked"></div>
css
.radio {
  width: 12px;
  height: 12px;
  border: 1px solid #999;
  border-radius: 50%;
  cursor: pointer;
}

.radio.checked {
  border-color: #008c8c;
}

.radio.checked::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  background: #008c8c;
  margin-left: 3.5px;
  margin-top: 3.5px;
  border-radius: 50%;
}

最佳实践

重置浏览器表单元素样式

css
input[type="text"],
textarea,
select {
  border: 1px solid #999;
}

input[type="text"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #008c8c;
}

button {
  border: 2px solid #008c8c;
  border-radius: 5px;
}

自定义漂亮的单选框

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .radio-item .radio {
        width: 12px;
        height: 12px;
        border: 1px solid #999;
        border-radius: 50%;
        cursor: pointer;
        display: inline-block;
      }

      .radio-item input:checked + .radio {
        border-color: #008c8c;
      }

      .radio-item input:checked ~ span {
        color: #008c8c;
      }

      .radio-item input:checked + .radio::after {
        content: "";
        display: block;
        width: 5px;
        height: 5px;
        background: #008c8c;
        margin-left: 3.5px;
        margin-top: 3.5px;
        border-radius: 50%;
      }

      .radio-item input[type="radio"] {
        display: none;
      }
    </style>
  </head>

  <body>
    <p>
      请选择性别:
      <label class="radio-item">
        <input name="gender" type="radio" />
        <span class="radio"></span>
        <span>男</span>
      </label>

      <label class="radio-item">
        <input name="gender" type="radio" />
        <span class="radio"></span>
        <span>女</span>
      </label>
    </p>
  </body>
</html>

技巧

场景: 表单一般需要表单验证,验证会有 tips 提示。 方案:

  • 我们会将 tips 放置在 form-item 元素内
  • 设置 tips 的 display: none;
  • 我们将错误的一些样式用一个类来控制,这样出现错误的时候我们只需要用 js 去添加这个类即可。
html
<div class="form-item haserror">
  <input type="text" placeholder="账号" />
  <div class="error">该昵称已被他人使用</div>
</div>
css
.form-area .form-item .error {
  position: absolute;
  width: 240px;
  right: -250px;
  top: 10px;
  color: #f45d90;
  font-size: 12px;
  display: none; //先设置隐藏
}

.form-area .form-item.haserror .error {
  display: block; //添加haserror类后,error显示
}

.form-area .form-item.haserror input {
  border-color: #f45d90; //同时可以设置haserror类 下input边框颜色为红色
}

MIT License