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

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和{{1}的三种不同状态中选择btn个hover属性和active类的focus元素}。

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

3 个答案: