带有 CSS 的样式禁用按钮

Posted 2023-03-05

【中文标题】带有 CSS 的样式禁用按钮

【英文标题】：Style disabled button with CSS

【发布时间】：2013-01-22 21:23:26

【问题描述】：

我正在尝试使用嵌入图像更改按钮的样式，如下面的小提琴所示：

http://jsfiddle.net/krishnathota/xzBaZ/1/

恐怕在示例中没有图像。

我正在尝试：

在禁用时更改按钮的background-color 在按钮禁用时更改按钮中的图像 禁用时禁用悬停效果 点击按钮中的图片并拖动，可以单独看到图片；我想避免这种情况 可以选择按钮上的文本。我也想避免这种情况。

我试过在button[disabled] 做。但有些效果无法禁用。喜欢 top: 1px; position: relative; 和图片。

【参考方案1】：

我认为您应该能够使用以下方法选择禁用的按钮：

button[disabled=disabled], button:disabled 
    // your css rules

【讨论】：

我可以禁用悬停吗？我听说这在 IE6 中不起作用？

我不认为你可以，但我不是 100% 确定。如果您还可以在禁用按钮上添加一个禁用类，那么您可能可以通过该类来实现。

【参考方案2】：

对于禁用的按钮，您可以使用:disabled 伪类。它适用于所有具有disabled API 的元素（通常是表单元素）。

对于仅支持 CSS2 的浏览器/设备，您可以使用 [disabled] 选择器。

与图片一样，不要在按钮中放置图片。将 CSS background-image 与 background-position 和 background-repeat 一起使用。这样就不会拖拽图片了。

选择题：这里是具体问题的链接：

How to disable text selection highlighting

禁用选择器的示例：

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,
button[disabled]
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;


div 
  padding: 5px 10px;

<div>
  <button> This is a working button </button>
</div>

<div>
  <button disabled> This is a disabled button </button>
</div>

【讨论】：

适用于 CSS 2 或 3（或两者）？

据我所知，:disabled 选择器是一个 CSS3 选择器。 background-image、background-repeat、background-position 在 CSS 2 中工作。

所以也许做一个 :disabled, [disabled] 会在 CSS2 和 3 中工作？

请注意，disabled="true" 的 ="true" 部分并不是导致它被禁用的原因。您可以使用disabled="false" 或disabled="cat"，它仍然会被禁用。或者干脆让disabled 没有任何价值。该属性只能在 html 中出现/省略，或通过 javascript 添加 true/false

:disabled 是一个伪类，而不是一个伪元素。只有三个伪元素：::before、::after，以及新增的::marker。你可以很容易地分辨出另一个，因为对于伪元素，它们使用:: 作为前缀，对于伪类:。我正在纠正这个错误。

【参考方案3】：

input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,

  //  apply css here what u like it will definitely work...

【参考方案4】：

在您的页面中添加以下代码。没有对按钮事件进行任何更改，禁用/启用按钮只需在 JavaScript 中添加/删除按钮类。

方法一

 <asp Button ID="btnSave" CssClass="disabledContent" runat="server" />

<style type="text/css">
    .disabledContent 
    
        cursor: not-allowed;
        background-color: rgb(229, 229, 229) !important;
    

    .disabledContent > * 
    
        pointer-events:none;
    
</style>

方法二

<asp Button ID="btnSubmit" CssClass="btn-disable" runat="server" />

<style type="text/css">
    .btn-disable
        
        cursor: not-allowed;
        pointer-events: none;

        /*Button disabled - CSS color class*/
        color: #c0c0c0;
        background-color: #ffffff;

        
</style>

【讨论】：

正是我想要的。按钮已禁用但看起来已启用！

感觉按钮被禁用添加下面的CSS代码颜色：#c0c​​0c0;背景颜色：#ffffff;

【参考方案5】：

为禁用的按钮应用灰色按钮 CSS。

button[disabled]:active, button[disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
input[type="submit"][disabled]:active,
input[type="submit"][disabled] ,
button[disabled]:hover,
input[type="button"][disabled]:hover,
input[type="submit"][disabled]:hover

  border: 2px outset ButtonFace;
  color: GrayText;
  cursor: inherit;
  background-color: #ddd;
  background: #ddd;

【参考方案6】：

当您的按钮被禁用时，它会直接设置不透明度。所以首先我们要设置它的不透明度为

.v-button
    opacity:1;    

【参考方案7】：

对于我们所有使用引导程序的人，您可以通过添加“禁用”类并使用以下内容来更改样式：

HTML

<button type="button"class="btn disabled">Text</button>

CSS

.btn:disabled,
.btn.disabled
  color:#fff;
  border-color: #a0a0a0;
  background-color: #a0a0a0;

.btn:disabled:hover,
.btn:disabled:focus,
.btn.disabled:hover,
.btn.disabled:focus 
  color:#fff;
  border-color: #a0a0a0;
  background-color: #a0a0a0;

请记住，添加“禁用”类并不一定会禁用按钮，例如在提交表单中。要禁用其行为，请使用 disabled 属性：

<button type="button"class="btn disabled" disabled="disabled">Text</button>

here 提供了一些示例的工作小提琴。

【参考方案8】：

由 CSS：

.disable
   cursor: not-allowed;
   pointer-events: none;

您可以为该按钮添加任何装饰。 要更改状态，您可以使用 jquery

$("#id").toggleClass('disable');

【参考方案9】：

如果您将样式 (.css) 文件更改为 SASS (.scss)，请使用：

button 
  background-color: #007700;
  &:disabled 
    background-color: #cccccc;
  

【参考方案10】：

需要如下应用css：

button:disabled,button[disabled]
    background-color: #cccccc;
    cursor:not-allowed !important;
  

【参考方案11】：

考虑以下解决方案

.disable-button 
  pointer-events: none; 
  background-color: #edf1f2;

【讨论】：

此解决方案将增加正在构建的应用程序/服务的弱点。

@FrancoGil 你是对的，但这可能是实现禁用按钮的一种方法