我正在尝试使用嵌入式图像更改按钮的样式,如下面的小提琴所示:
http://jsfiddle.net/krishnathota/xzBaZ/1/
在示例中没有图像,我很害怕。
我正在努力:
background-color
我试过button[disabled]
。但是有些效果无法禁用。喜欢
top: 1px; position: relative;
和图片。
答案 0 :(得分:242)
对于禁用的按钮,您可以使用:disabled
伪元素。它适用于所有元素。
对于仅支持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>
答案 1 :(得分:76)
我认为您应该可以使用以下选项禁用按钮:
button[disabled=disabled], button:disabled {
// your css rules
}
答案 2 :(得分:30)
在页面中添加以下代码。相信我,没有对按钮事件做出任何更改,禁用/启用按钮只需在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>
答案 3 :(得分:9)
为禁用按钮应用灰色按钮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;
}
答案 4 :(得分:5)
通过 CSS:
.disable{
cursor: not-allowed;
pointer-events: none;
}
他们可以为该按钮添加任何装饰。 要更改状态,您可以使用 jquery
$("#id").toggleClass('disable');
答案 5 :(得分:4)
对于我们所有使用bootstrap的人,您可以通过添加&#34;禁用&#34;来更改样式。上课并使用以下内容:
<强> 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;
}
请记住添加&#34;禁用&#34; class并不一定禁用该按钮,例如在提交表单中。要禁用其行为,请使用disabled属性:
<button type="button"class="btn disabled" disabled="disabled">Text</button>
可以使用一些例子here。
答案 6 :(得分:2)
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
{
// apply css here what u like it will definitely work...
}
答案 7 :(得分:2)
当您的按钮被禁用时,它会直接设置不透明度。首先,我们必须将其不透明度设置为
.v-button{
opacity:1;
}
答案 8 :(得分:0)
如果您更改为scss,请使用:
button {
backgroud-color: #007700
&:disabled {
backgroud-color: #cccccc
}
}
答案 9 :(得分:0)
需要如下应用CSS:
button:disabled,button[disabled]{
background-color: #cccccc;
cursor:not-allowed !important;
}
答案 10 :(得分:0)
考虑以下解决方案
.disable-button{
pointer-events: none;
background-color: #edf1f2;
}