CSS如何使用:disabled伪类

89次阅读
没有评论

在CSS中,:disabled 伪类可以选择已经被禁用的表单控件。以下是如何在CSS中使用 :disabled 伪类的步骤:

  1. 选择要应用样式的表单控件。
  2. 在选择器中添加 :disabled 伪类。

例如,要选择所有被禁用的文本框并更改它们的背景颜色,可以使用以下CSS代码:

input[type="text"]:disabled {
  background-color: lightgray;
}

这将选择所有被禁用的文本框,并将它们的背景颜色更改为浅灰色。

以下是一个完整的HTML5页面示例,其中包含一个使用 :disabled 伪类的CSS样式表:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>:disabled Example</title>
  <style>
    /* Select all disabled text fields and change their background color */
    input[type="text"]:disabled {
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <h2>Registration Form</h2>
  <form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" disabled><br>
    <label for="email">Email:</label>
    <input type="text" id="email" name="email"><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

在这个例子中,我们使用CSS选择器 input[type=”text”]:disabled 选择了所有被禁用的文本框,并将它们的背景颜色更改为浅灰色。这样就可以通过视觉效果来强调哪些文本框被禁用了。

正文完
 
评论(没有评论)