使用 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中文网其他相关文章!