样式禁用按钮与CSS

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

http://jsfiddle.net/krishnathota/xzBaZ/1/ < a href = " http://jsfiddle.net/krishnathota/xzBaZ/1/ " > < / >

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

我试着:

  1. 当按钮被禁用时，更改按钮的background-color
  2. 当按钮被禁用时，更改按钮中的图像
  3. 禁用悬停效果时禁用
  4. 当您在按钮中单击图像并拖动它时，可以单独看到图像;我想避免这种情况
  5. 可以选择按钮上的文本。我也想避免这种情况。

我尝试在button[disabled]。但有些效果是无法消除的。就像 top: 1px; position: relative;和image.

1116845 次浏览
小开

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

button[disabled=disabled], button:disabled {
// your css rules
}
小开
最佳答案

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

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

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

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

禁用选择器的示例:

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>

小开 
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"类并使用以下方法来改变样式:

超文本标记语言

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

提交答案