仅使用 css 为禁用的输入设置样式

Question

我有一种奇怪的情况。我正在尝试设置禁用输入按钮的样式，因为我有一个恼人的悬停将文本变为白色。这会让用户感到困惑，因为它的作用就像一个普通的按钮。

我尝试了一些东西，主要是 css 和一些 jQuery 的东西。如果可以的话，我想把它保存在 css 中。

这是我的 html，抱歉，它是一个 larvel 表单助手。

{{ Form::submit('Change', array_merge($design_project->is_locked ? ['disabled' => 'disabled'] : [], ['class' => 'btn btn-blue span3'])) }}

这就是浏览器生成的

<input disabled="disabled" class="btn btn-blue span3" type="submit" value="Change">

我正在做类似的事情

.btn:hover input[disabled], .btn:active input[disabled], .btn:focus input[disabled]{
  color:green
}

任何帮助都会很棒！

Answer 1

CSS 选择器中的空格选择子元素。

.btn input

这基本上就是您编写的内容，它将在任何具有 btn 类的元素中选择 <input> 元素。

我想你正在寻找

input[disabled].btn:hover, input[disabled].btn:active, input[disabled].btn:focus

这将选择disabled 属性和btn 类处于hover、active 和focus 三种不同状态的<input> 元素。

Answer 2

使用这个 CSS (jsFiddle example)：

input:disabled.btn:hover,
input:disabled.btn:active,
input:disabled.btn:focus {
  color: green
}

你必须把最外面的元素写在左边，最里面的元素写在右边。

.btn:hover input:disabled 将选择包含在具有类btn 的元素中的任何禁用输入元素，该类当前由用户悬停。

我更喜欢:disabled 而不是[disabled]，请参阅此问题进行讨论：Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?

---

顺便说一句，Laravel (PHP) 生成 HTML，而不是浏览器。

Answer 3

假设您有 3 个按钮：

<input type="button" disabled="disabled" value="hello world">
<input type="button" disabled value="hello world">
<input type="button" value="hello world">

要设置禁用按钮的样式，您可以使用以下 css：

input[type="button"]:disabled{
    color:#000;
}

这只会影响被禁用的按钮。

要在悬停时停止颜色变化，您也可以使用它：

input[type="button"]:disabled:hover{
    color:#000;
}

您也可以通过使用 css-reset 来避免这种情况。