如何使用 CSS 自定义禁用按钮的样式？

使用 CSS 自定义禁用按钮样式

创建可访问的网页时，确保元素在禁用时具有正确的样式至关重要。本文介绍了使用 CSS 自定义禁用按钮外观的各个方面。

更改按钮属性

要在禁用时更改按钮的背景颜色和图像，请使用：禁用伪类：

button:disabled {
  background-color: #cccccc;
  background-image: url('disabled-image.png');
}

禁用悬停效果

要防止禁用的按钮对悬停操作做出反应，请删除悬停特定的样式：

button:disabled:hover {
  background-color: #cccccc;
}

防止图像拖动

避免使用图像作为按钮。相反，使用具有背景位置和背景重复的 CSS 背景图像：

button {
  background-image: url('button-image.png');
  background-position: center;
  background-repeat: no-repeat;
}

禁用文本选择

要禁止按钮内的文本选择，请应用以下命令样式：

button {
  -webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
     user-select: none;
}

浏览器兼容性

对于仅支持 CSS2 的浏览器，请使用 [disabled] 选择器而不是 :disabled。

示例

考虑以下示例:

<button>Working Button</button>
<button disabled>Disabled Button</button>

button {
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
}

button:disabled {
  background-color: #ccc;
  color: #888;
}

这段代码呈现两个按钮：一个具有蓝色边框和白色文本的功能按钮，另一个具有灰色背景和灰色文本的禁用按钮。禁用按钮的图像显示自定义图像，并且其悬停效果被禁用。

以上是如何使用 CSS 自定义禁用按钮的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！