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

Question

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

我尝试了一些东西，主要是 css 和一些 jQuery 东西。如果可能的话，我想将其保留在 css 中。

这是我的 html，抱歉，它是一个幼虫形式的助手。

{{ 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 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 - 而不是浏览器。