如何使用 CSS 完全禁用按钮的功能？-css教程-PHP中文网

首页

web前端

css教程

如何使用 CSS 完全禁用按钮的功能？

Susan Sarandon

Dec 28, 2024 am 10:14 AM

How Can I Completely Disable a Button's Functionality Using CSS?

用于禁用按钮功能的 CSS

完全禁用按钮，包括其悬停效果、图像和任何拖放功能, CSS 提供了多种选项。

更改按钮外观禁用

使用 :disabled 伪类修改禁用按钮的外观：

button:disabled {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

登录后复制

删除图像和悬停效果

不要使用图像作为按钮，而是使用具有背景位置和背景重复属性的 CSS 背景图像。这可以防止图像拖动：

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

登录后复制

禁用悬停效果

button:disabled {
  background-image: ninguno;
  cursor: default;
}

登录后复制

防止文本选择

禁用文本选择，将以下 CSS 添加到按钮：

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

登录后复制

示例：

button {
  border: 1px solid #0066cc;
  background-color: #0099cc;
  color: #ffffff;
  padding: 5px 10px;
}

button:hover {
  border: 1px solid #0099cc;
  background-color: #00aacc;
  color: #ffffff;
  padding: 5px 10px;
}

button:disabled {
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
  background-image: none;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div {
  padding: 5px 10px;
}

登录后复制

此 CSS 禁用按钮功能，使其在视觉上呈灰色且无响应。

以上是如何使用 CSS 完全禁用按钮的功能？的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn