我试图改变一个按钮的风格与一个嵌入的图像,如下图所示:
http://jsfiddle.net/krishnathota/xzBaZ/1/
在这个例子中,恐怕没有图像。
我试着:
当按钮被禁用时更改按钮的背景颜色
当按钮被禁用时,更改按钮中的图像
禁用悬停效果时禁用
当您在按钮中单击图像并拖动它时,可以单独看到图像;我想避免这种情况
可以选择按钮上的文本。我也想避免这种情况。
我试着做in button[disabled]。但有些效果是无法消除的。就像
上图:1 px;位置:相对;和图像。
对于已禁用的按钮,可以使用: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 >
在页面中添加以下代码。不改变按钮事件,禁用/启用按钮只需在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;
}
对于我们所有使用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>
一个工作提琴与一些例子可在这里。