26

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

我尝试了一些东西，主要是 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
}

任何帮助都会很棒！

4

3 回答 3

57

使用这个 CSS（jsFiddle 示例）：

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

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

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

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

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

于 2013-08-26T13:42:16.827 回答
18

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

于 2013-08-26T13:44:56.657 回答
1

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

.btn input

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

我想你正在寻找

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

这将选择具有 和三种不同状态的属性和类的<input>元素。disabledbtnhoveractivefocus

于 2013-08-26T13:41:44.913 回答