Html 仅使用 css 设置禁用输入的样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18445543/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling a disabled input with css only
提问by zazvorniki
I have sort of a strange situation. I'm trying to style a disabled input button because I have an annoying hover turning the text to white. This makes it confusing to the user because its acting like a normal button.
我有一种奇怪的情况。我正在尝试为禁用的输入按钮设置样式，因为我有一个烦人的悬停将文本变为白色。这让用户感到困惑，因为它就像一个普通按钮。
I have tried a few things, mainly css and a few jQuery things. I would like to keep this in css if at all posable.
我尝试了一些东西，主要是 css 和一些 jQuery 的东西。如果可以的话，我想将它保留在 css 中。
This is my html, sorry it is in a larvel form helper.
这是我的 html，抱歉它是幼虫形式的助手。
{{ Form::submit('Change', array_merge($design_project->is_locked ? ['disabled' => 'disabled'] : [], ['class' => 'btn btn-blue span3'])) }}
and this is what the browser generates
这是浏览器生成的
<input disabled="disabled" class="btn btn-blue span3" type="submit" value="Change">
and I was working on something like this
我正在做这样的事情
.btn:hover input[disabled], .btn:active input[disabled], .btn:focus input[disabled]{
color:green
}
Any help would be wonderful!
任何帮助都会很棒！
回答by ComFreek
Use this CSS (jsFiddle example):
使用此 CSS（jsFiddle 示例）：
input:disabled.btn:hover,
input:disabled.btn:active,
input:disabled.btn:focus {
color: green
}
You have to write the most outer element on the left and the most inner element on the right.
你必须在左边写最外面的元素，在右边写最里面的元素。
.btn:hover input:disabledwould select any disabled input elements contained in an element with a class btnwhich is currently hovered by the user.
.btn:hover input:disabled将选择包含在具有btn当前由用户悬停的类的元素中的任何禁用的输入元素。
I would prefer :disabledover [disabled], see this question for a discussion: Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
我宁愿:disabled过[disabled]，看到讨论这个问题：我应该使用CSS：禁用伪类或[禁用]属性选择还是见仁见智了？
By the way, Laravel (PHP) generates the HTML - not the browser.
顺便说一句，Laravel (PHP) 生成 HTML - 而不是浏览器。
回答by saad arshad
Let's just say you have 3 buttons:
假设您有 3 个按钮：
<input type="button" disabled="disabled" value="hello world">
<input type="button" disabled value="hello world">
<input type="button" value="hello world">
To style the disabled button you can use the following css:
要设置禁用按钮的样式，您可以使用以下 css：
input[type="button"]:disabled{
color:#000;
}
This will only affect the button which is disabled.
这只会影响被禁用的按钮。
To stop the color changing when hovering you can use this too:
要在悬停时停止颜色更改，您也可以使用它：
input[type="button"]:disabled:hover{
color:#000;
}
You can also avoid this by using a css-reset.
您也可以通过使用 css-reset 来避免这种情况。
回答by Cobra_Fast
A space in a CSS selector selects child elements.
CSS 选择器中的空格选择子元素。
.btn input
This is basically what you wrote and it would select <input>elements within any element that has the btnclass.
这基本上就是您编写的内容，它将选择<input>具有btn该类的任何元素中的元素。
I think you're looking for
我想你正在寻找
input[disabled].btn:hover, input[disabled].btn:active, input[disabled].btn:focus
This would select <input>elements with the disabledattribute and the btnclass in the three different states of hover, activeand focus.
这将选择<input>与元素disabled属性和btn在三个不同状态类hover，active和focus。
