Pure.CSS 禁用输入框

2025年2月13日 | 阅读 4 分钟

当我们要求某人填写表格时,有时他们之前的某些选择会被禁用,而另一些则被激活。然后,我们也可以在 Pure CSS 中使用 HTML disabled 属性。其他输入格式,如 radio、checkbox、number、text 等,都与此功能兼容。有关更多信息,请参阅 Pure CSS 按钮页面。

"disable" 属性禁用表单控件。当您想将禁用的表单控件添加到您的表单时,可以使用它。

它被“锁定”在一个状态,阻止用户更改其值或提交表单。

  • 在没有声明或实践的情况下,没有任何东西是完美的。
  • 有人宣布不应在任何情况下使用某个字段。

语法

以下语法用于禁用输入标签中的键盘。

以下语法用于禁用按钮和输入按钮。我们可以在 button 标签中设置 disabled 关键字。

示例

以下示例展示了在 pure.css 表单中禁用的输入。

示例 1

在此示例中,使用 disabled 属性禁用了表单中输入的用户名和电子邮件。

输出

输出显示了 pure css 禁用的输入。

PureCSS Inputs

示例 2

在此示例中,使用 disabled 属性禁用了表单中的用户名、密码和数字。“disabled”关键字用于输入标签的末尾。

输出

输出显示了 pure css 禁用的输入。

PureCSS Inputs

示例 3

Pure CSS 单选按钮和复选框输入使用 pure css 放置为禁用状态。disabled 关键字用于复选框和单选按钮标签的末尾。

输出

输出显示了 pure css 禁用的输入。

PureCSS Inputs

示例 4

Pure CSS 在使用 pure css 的按钮和输入标签中使用 disabled 关键字。

输出

输出显示了 pure css 禁用的输入。

PureCSS Inputs

说明

  • 可以使用该关键字禁用输入提交按钮和 button 标签。
  • "disabled" 关键字用于 button 标签的末尾。

结论

使用纯 CSS 样式化禁用的输入,使您的 Web 表单更具可访问性和用户友好性。disabled 关键字提供了一种简单有效的方法来定位和设置文本字段、按钮和下拉菜单的样式。

您可以使用本文中介绍的方法,确保禁用的输入美观且易于使用。请务必记住在各种设备和浏览器上测试您的设计,以保证一致性和可访问性。