带有CSS的禁用样式按钮
带有CSS的禁用样式按钮
提问于 2013-02-07 19:31:42
我正在尝试更改一个带有嵌入图像的按钮的样式，如下图所示：
http://jsfiddle.net/krishnathota/xzBaZ/1/
在这个例子中，恐怕没有图像。
我在试着：
当你点击按钮中的图片并拖动它时，改变按钮的background-color，当你点击按钮上的图片并拖动它时，你会发现图片是分开的；我想避免
- 按钮上的文字可以被选中。我也想避免这种情况。
我试着在button[disabled]中这样做。但有些效果无法禁用。比如top: 1px; position: relative;和image。
回答 11
Stack Overflow用户
回答已采纳
发布于 2013-02-07 19:47:18
对于禁用的按钮，可以使用:disabled伪类。它适用于所有具有表单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>
Stack Overflow用户
发布于 2013-02-07 19:41:58
我认为您应该能够使用以下选项来选择禁用的按钮：
button[disabled=disabled], button:disabled {
// your css rules
}Stack Overflow用户
发布于 2014-12-23 22:20:45
在您的页面中添加以下代码。相信我，不需要更改按钮事件，只需在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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14750078
复制相关文章
相似问题