阿卡不拉

Appearance

美化表单元素 ​

新的伪类 ​

:focus 伪类 ​

:focus 伪类用于设置元素获得焦点时的样式，常用于表单元素的交互反馈。

语法：

css
element:focus {
  /* 样式声明 */
}

示例：

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>
      input {
        color: #999;
      }
      input:focus {
        outline: 1px solid #008c8c;
        outline-offset: 0;
        color: #000;
      }
    </style>
  </head>

  <body>
    <p>
      <a tabindex="2" href="https://www.baidu.com">lorem</a>
    </p>

    <p>
      <input tabindex="1" type="text" />
    </p>

    <p>
      <button tabindex="3">提交</button>
    </p>
  </body>
</html>

说明：

  • tabindex 属性用于控制 Tab 键切换聚焦元素的顺序
  • tabindex="1" 表示第一个获得焦点的元素
  • outline 属性用于设置聚焦时的轮廓线
  • outline-offset 控制轮廓线与元素边缘的距离

:checked 伪类 ​

:checked 伪类用于设置单选框、多选框或 <option> 元素被选中时的样式。

语法：

css
input:checked {
  /* 样式声明 */
}

示例：

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>
      input:checked + label {
        color: red;
      }
    </style>
  </head>

  <body>
    <p>
      <input id="radmale" name="gender" type="radio" />
      <label for="radmale">男</label>

      <input id="radfemale" name="gender" type="radio" />
      <label for="radfemale">女</label>
    </p>
  </body>
</html>

说明：

  • + 选择器表示相邻兄弟选择器，选择紧跟在 input:checked 后面的 label 元素

常见用法 ​

重置表单元素样式 ​

移除浏览器默认的表单样式，为自定义样式做准备：

css
input,
textarea,
button,
select {
  border: none;
}

input:focus,
textarea:focus,
button:focus,
select:focus {
  outline: none;
  outline-offset: 0;
}

控制 textarea 尺寸调整 ​

使用 resize 属性控制 <textarea> 元素是否允许用户调整尺寸：

属性值：

  • both：默认值，允许水平和垂直方向调整尺寸
  • none：禁止调整尺寸
  • horizontal：只允许水平方向调整尺寸
  • vertical：只允许垂直方向调整尺寸
css
textarea {
  resize: horizontal;
}

设置文本框内边距 ​

控制文本框边缘到内容的距离，提升用户体验：

css
/* 方式1：padding */
input {
  padding: 0 10px;
}
/* 方式2：text-indent  */
input,
textarea {
  text-indent: 1em;
}

说明：

  • padding 方式：为元素添加内边距，适用于所有表单元素
  • text-indent 方式：设置首行缩进，主要用于文本输入框

自定义单选和多选框样式 ​

由于浏览器默认的单选框和多选框样式难以自定义，通常使用伪元素来模拟：

基础样式示例：

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>漂亮的单选框</title>
    <style>
      .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%;
      }
    </style>
  </head>

  <body>
    <div class="radio checked"></div>
  </body>
</html>

完整的交互式单选框：

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>

说明：

  • 使用 display: none 隐藏原生的单选框
  • 通过 input:checked + .radio 选择器控制自定义样式的显示
  • input:checked ~ span 选择器用于改变选中时文字的颜色
  • 伪元素 ::after 用于创建选中状态的圆点