仅使用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示例):

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

你必须在左边写出最外面的元素,在右边写出最内在的元素.

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

我宁愿:disabled过[disabled],看到这个问题的讨论:我应该使用CSS:禁用伪类或[禁用]属性选择还是见仁见智了？

顺便说一句,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来避免这种情况.