2023-12-10 05:00:01

样式禁用按钮与CSS

我试图改变一个按钮的风格与一个嵌入的图像,如下图所示:

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

在这个例子中,恐怕没有图像。

我试着:

当按钮被禁用时更改按钮的背景颜色 当按钮被禁用时,更改按钮中的图像 禁用悬停效果时禁用 当您在按钮中单击图像并拖动它时,可以单独看到图像;我想避免这种情况 可以选择按钮上的文本。我也想避免这种情况。

我试着做in button[disabled]。但有些效果是无法消除的。就像 上图:1 px;位置:相对;和图像。


我认为你应该能够选择一个禁用按钮使用以下:

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

对于已禁用的按钮,可以使用:disabled伪类。它适用于所有禁用API的元素(通常是表单元素)。

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

与图像一样,不要在按钮中放入图像。使用CSS background-image with background-position和background-repeat。这样,图像拖动就不会发生。

选择问题:这里有一个具体问题的链接:

如何禁用文本选择高亮显示

禁用选择器的示例:

按钮{ 边框:1px实心#0066cc; background - color: # 0099 cc的; 颜色:# ffffff; 填充:5px 10px; } 按钮:{徘徊 边框:1px实心#0099cc; background - color: # 00协会; 颜色:# ffffff; 填充:5px 10px; } 按钮:残疾, 按钮(残疾人){ 边框:1px实体#999999; background - color: # cccccc; 颜色:# 666666; } div { 填充:5px 10px; } < div > 这是一个工作按钮</button> < / div > < div > <button disabled>这是一个禁用的按钮 < / div >


input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
{
  //  apply css here what u like it will definitely work...
}

在页面中添加以下代码。不改变按钮事件,禁用/启用按钮只需在JavaScript中添加/删除按钮类。

方法1

 <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>

方法2

<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。

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;
}

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

.v-button{
    opacity:1;    
}

对于我们所有使用bootstrap的人来说,你可以通过添加"disabled"类并使用以下方法来改变样式:

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”类并不一定禁用按钮,例如在提交表单中。禁用它的行为使用disabled属性:

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

一个工作提琴与一些例子可在这里。


CSS:

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

你可以在那个按钮上添加任何装饰。 要更改状态,可以使用jquery

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

如果你将你的style (.css)文件更改为SASS (.scss),请使用:

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

需要应用css如下所示:

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

考虑以下解决方案

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