虚拟类别选择器 ( 输入 )

虚拟类别选择器有许多种，这篇教学会介绍“表单输入”相关的虚拟类别选择器，例如 :checked、:disabled、:in-range、:valid、:required 等等，运用这些虚拟类别选择器，就能精准控制输入元素在不同状态下的样式。

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

“表单输入”虚拟类别选择器

下方列出和“表单输入”有关的虚拟类别选择器 ( 支援度 All 表示主流浏览器都支援 )：

:checked

“:checked”表示“被勾选的状态”，会搭配具有“checkbox 和 radio”属性的 input 元素使用，下方的范例使用会在用户勾选选项时，将勾选框的边框变成红色。

线上展示：https://codepen.io/oxxo/pen/wvbMZdM

<!-- HTML 程式碼 -->
<form action="/test.aspx" method="post">
  <input type="radio" name="a"><span>Apple</span>
  <input type="radio" name="a"><span>Ball</span>
  <input type="radio" name="a"><span>Cat</span>
  <br>
  <input type="checkbox" name="b"><span>Orange</span>
  <input type="checkbox" name="b"><span>Banana</span>
  <input type="checkbox" name="b"><span>Grap</span>
</form>

<!-- CSS 程式碼 -->
<style>
  input:checked {outline: 2px solid red;}
</style>

使用 :checked 通常会搭配“文件结构选择器”选取“相邻兄弟”进行样式调整，如果将 CSS 改成下方的范例，当用户勾选选项时，选项后方的文字会一并变色。

注意，由于纯文字不能当作任何元素，如果后方是接着“没有任何标签包覆的纯文字”，就无法使用选择器选取。

input:checked + * {color: red;}   /* 勾選元素的相鄰兄弟變成紅色文字 */

:disabled、:enabled

“:disabled”表示“禁用状态”，“:enabled”表示“启用状态”，通常会搭配“支援输入状态表单元素”一起使用，只要不使用 :disabled 的表单输入元素，一率表示为 enabled 状态，两个状态必定存在一种，下方的范例执行后，具有 disabled 属性的输入元素就会呈现灰色文字、灰色虚线背景，而其他输入元素则会呈现黄色背景。

线上展示：https://codepen.io/oxxo/pen/YzbwMYo

<!-- HTML 程式碼 -->
<form action="/test.aspx" method="post">
  <input type="text" value="oxxo.studio" disabled>  <!-- 加上 disabled 屬性 -->
  <br>
  <input type="password">
  <br>
  <br>
  <textarea cols="20" rows="5" name="content"></textarea>
  <br>
  <button type="submit">送出</button>
  <button type="submit" disabled>重填</button>  <!-- 加上 disabled 屬性 -->
</form>

<!-- CSS 程式碼 -->
<style>
  form *:disabled {
    color: #ccc; 
    border:1px dashed #bbb;
  }
  form *:enabled {
    background:#ff0;
  }
</style>

:read-only、:read-write

“:read-only”表示“只读状态”，“:read-write”表示“可读写状态”，通常会搭配“文字输入的表单元素”一起使用，只要不使用 :read-only 的表单输入元素，一率表示为 :read-write 状态，两个状态必定存在一种，但如果是按钮相关的输入元素，则都使用 :read-only。

• 注意！:read-only 选择器的中间有破折号“-”，但实际属性名称却是“readonly”。
• 有些元素使用 :read-only 选择器会影响 :disabled 样式，两者的差异在于“送出表单”时，具有 readonly 属性的内容会被送出，但属性为 disabled 的内容不会被送出。

下方的范例执行后，具有 readonly 属性的输入元素就会呈现灰色文字、灰色虚线背景 ( 按钮也会变成这种状态 )，而其他输入元素则会呈现黄色背景。

线上展示：https://codepen.io/oxxo/pen/abrdxjQ

<!-- HTML 程式碼 -->
<form action="/test.aspx" method="post">
  <input type="text" value="oxxo.studio" readonly>  <!-- 加上 readonly 屬性 -->
  <br>
  <input type="password">
  <br>
  <br>
  <textarea cols="20" rows="5" name="content"></textarea>
  <br>
  <button type="submit">送出</button>
  <button type="submit">重填</button>
</form>

<!-- CSS 程式碼 -->
<style>
form *:read-only {
  color: #ccc; 
  border:1px dashed #bbb;
}
form *:read-write {
  background:#ff0;
}
</style>

:in-range、:out-of-range

“:in-range”表示“在数值范围内”，“:out-of-range”表示“超出数值范围”，会搭配“具有 min 与 max 属性”的数字或时间元素一起使用，使用 :out-of-range 时，只要输入的数值在 min 与 max 数值范围之外，就会套用相对应的样式，其他一率表示为 :in-range 状态，两个状态必定存在一种。

下方的范例执行后，当手动输入的日期或数值超过范围 ( 不使用下拉选单，因为下拉选单会锁定范围 )，背景就会变成红色。

线上展示：https://codepen.io/oxxo/pen/RwmrOdW

<!-- HTML 程式碼 -->
<form action="/test.aspx" method="post">
  範圍 0～100
  <br/>
  <input type="number" min="0" max="100">
  <br/>
  <br/>
  範圍 2024-05-01 ～ 2024-05-07
  <br/>
  <input type="date" min="2022-05-01" max="2024-05-07">
</form>

<!-- CSS 程式碼 -->
<style>
  form *:out-of-range {
    background: red;
  }
</style>

:valid、:invalid、:user-valid、:user-invalid

“:valid”表示“通过验证规则”，“:invalid”表示“未通过验证规则”，会搭配“具有 pattern 正规表达式验证属性”的输入元素一起使用，使用 :invalid 时，只要输入的数值经过验证回传 False ( 未通过验证 ) 就会套用样式，其他一率表示为 :valid 状态，两个状态必定存在一种。

“::user-valid”和“:user-invalid”也是判断“有没有通过验证规则”，但差别在于 ::user-valid 和 :user-invalid 需要“与用户的互动”才会进行验证，:valid 和 :invalid 则是在输入当下就进行验证。

下方的范例执行后，第一个输入字段限制一定要三个英文大小写字母，第二个和第三个输入字段限制两个数字，但第三个输入字段要在用户按下 Enter 之后才会验证，如果没有通过验证就会是红色背景 ( 正规表达式可以使用 ChatGTP 或 Poe.AI 辅助产生 )。

线上展示：https://codepen.io/oxxo/pen/WNBrBNX

<!-- HTML 程式碼 -->
<form action="/test.aspx" method="post">
  範圍：三個大小寫英文字母
  <br/>
  <input type="text" pattern="[A-Za-z]{3}">
  <br/>
  <br/>
  範圍：兩個數字
  <br/>
  <input type="text" pattern="\b\d{1}\d{1}\b">
  <br/>
  <br/>
  範圍：兩個數字 ( 按下 enter 後才會驗證 )
  <br/>
  <input class="user" type="text" pattern="\b\d{1}\d{1}\b">
</form>

<!-- CSS 程式碼 -->
<style>
  form *:invalid {background: red; }
  form .user:invalid {background: white;}     /* 避免上一行選擇器影響到背景 */
  form .user:user-invalid {background: red;}
</style>

:required、:optional

“:required”表示“必填”，“:optional”表示“选填”，使用 :required 时，只要元素具有 required 属性就会套用样式，其他一率表示为 :optional 状态，两个状态必定存在一种。下方的范例执行后，必填字段后方的星号会是红色，选填字段则会是黄色背景。

线上展示：https://codepen.io/oxxo/pen/QWRyRdr

<!-- HTML 程式碼 -->
<form action="/test.aspx" method="post">
  帳號：<input type="text" required> <span>*</span>
  <br>
  密碼：<input type="password" required> <span>*</span>
  <br>
  外號：<input type="text">
  <br>
  生日：<input type="date">
  <br>
  <br>
  <button type="submit">送出</button>
  <button type="submit">重填</button>
</form>

<!-- CSS 程式碼 -->
<style>
  form input:required + * {color: red;}
  form input:optional {background: yellow;}
</style>

:default

“:default”表示“默认选项”，对应有“selected”或“checked”等默认勾选属性的表单元素 ( 下拉选单受限于浏览器样式，只有部分浏览器支援 )。下方的范例执行后，有 selected 属性的选项就会变成红色文字。

线上展示：https://codepen.io/oxxo/pen/QWRyRMx

<!-- HTML 程式碼 -->
<form action="/test.aspx" method="post">
  <select>
    <optgroup label="iPhone">
      <option value="15p">iPhone 15 Pro</option>
      <option value="15" selected>iPhone 15</option>
      <option value="14p">iPhone 14 Pro</option>
      <option value="14">iPhone 14</option>
      <option value="13p">iPhone 13 Pro</option>
    </optgroup>
    <optgroup label="iPad">
      <option value="air">iPad Air</option>
      <option value="pro">iPad Pro</option>
    </optgroup>
  </select>
  <br/>
  <input type="radio" name="a"><span>Apple</span>
  <input type="radio" name="a" checked><span>Ball</span>
  <input type="radio" name="a"><span>Cat</span>
  <br>
  <input type="checkbox" name="b"><span>Orange</span>
  <input type="checkbox" name="b"><span>Banana</span>
  <input type="checkbox" name="b" checked><span>Grape</span>
</form>

<!-- CSS 程式碼 -->
<style>
  form *:default {
    font-size:100px;
    outline:1px solid red;
  }
  form *:default + * {
    color: red;
  }
</style>

:placeholder-shown

“:placeholder-shown”表示“没有输入文字显示默认内容的状态”，只要元素具有“placeholder”属性，在没有任何输入内容 ( 包含空白 ) 的状态下，就会套用这个虚拟类别选择器的样式，但只要有输入内容 ( 包含空白 ) 就会离开这个状态，下方的范例执行后，默认两个具有 placeholder 属性的字段都会是黄色背景，输入文字后就会是白色背景。

线上展示：https://codepen.io/oxxo/pen/MWdKdXx

<!-- HTML 程式碼 -->
<form action="/test.aspx" method="post">
  帳號：<input type="text" placeholder="oxxo">
  <br>
  姓名：<input type="password" placeholder="oxxo.studio">
  <br>
  外號：<input type="password">
  <br>
  <br>
  <button type="submit">送出</button>
  <button type="submit">重填</button>
</form>

<!-- CSS 程式碼 -->
<style>
  form input:placeholder-shown{
    background:yellow;
  }
</style>

:indeterminate

“:indeterminate”表示“不确定输入数值的状态”，通常会出现这个状态表示“用户尚未输入、使用 JavaScript 方式自动输入”，只要是这种状态的元素，就会套用这个虚拟类别选择器的样式，下方的范例执行后，会利用 JavaScript 替每个 input 元素加上 indeterminate 属性，这时样式就会套用默认 :indeterminate 选择器，但如果用户手动点击后，这个状态就会消失，也就不会套用相关样式。

线上展示：https://codepen.io/oxxo/pen/mdYVYgq

<!-- HTML 程式碼 -->
<form action="/test.aspx" method="post">
  <input type="radio" name="a"><span>Apple</span>
  <input type="radio" name="a"><span>Ball</span>
  <input type="radio" name="a"><span>Cat</span>
</form>
<form action="/test.aspx" method="post">
  <input type="checkbox" name="b"><span>Orange</span>
  <input type="checkbox" name="b"><span>Banana</span>
  <input type="checkbox" name="b"><span>Grape</span>
</form>

<!-- CSS 程式碼 -->
<style>
  form input:indeterminate + *{
    background:yellow;
  }
</style>

<!-- JavaScript 程式碼 -->
<script>
  const inputs = document.getElementsByTagName("input");
  for (let i = 0; i < inputs.length; i++) {
    inputs[i].indeterminate = true;
  }
</script>

:autofill

“:autofill”表示“元素可以由浏览器自动填入内容”，通常会出现这个状态表示“可以使用浏览器储存自动填入的内容填入表单”，如果用户手动点击后，这个状态就会消失，也就不会套用相关样式。

注意，通常浏览器透过“设定 > 自动填入”可以进行设定自动填入的内容，内容包含信用卡信息、地址、信箱、电话等信息，如果没有设定，这个选择器就会没有作用。

线上展示：https://codepen.io/oxxo/pen/MWdKddN

<!-- HTML 程式碼 -->
<form action="/test.aspx" method="post">
  email: <input type="email" name="email" autocomplete="email">
  <br>
  url: <input type="url" name="url" autocomplete="url">
  <br>
  <input type="submit" style="margin-top:10px;">
</form>

<!-- CSS 程式碼 -->
<style>
  form input:autofill{
    color:red;
  }
</style>

小结

在表单数量多的网页里，“表单输入”相关的虚拟类别选择器是绝对要使用的选择器，不仅可以协助表单排版，让用户更清楚自己的操作过程，此外也更能运用样式的设定，让后端 JavaScript 处理更为简便，是非常使用的选择器。

• W3C 官方参考：https://www.w3.org/TR/2018/SPSD-html5-20180327/disabled-elements.html
• MDN 文件参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

意见反馈