仅使用 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（jsFiddle 示例）：

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

您必须将最外层的元素写在左侧，将最内层的元素写在右侧。

.btn:hover input:disabled

将选择当前由用户悬停的类为

btn

的元素中包含的任何禁用输入元素。

我更喜欢

:disabled

而不是

[disabled]

，请参阅此问题进行讨论：我应该使用 CSS :disabled 伪类或 [disabled] 属性选择器还是这是一个意见问题？

---

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

Answer 2

假设您有 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 来避免这种情况。

Answer 3

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

.btn input

这基本上就是您编写的内容，它将选择具有

<input>

类的任何元素中的

btn

元素。

我想你正在寻找

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

这将选择具有

<input>

属性和

disabled

类处于

btn

、

hover

和

active

三种不同状态的

focus

元素。