使用CSS仅禁用输入样式

我有种奇怪的情况。我试图设计一个禁用的输入按钮，因为我有一个恼人的悬停将文本变成白色。这使用户感到困惑，因为它的行为就像一个普通的按钮。使用CSS仅禁用输入样式

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

任何帮助将是美好的！

来源

2013-08-26 zazvorniki

你可以发布生成的HTML吗？ – ComFreek

@Vector如果将鼠标悬停在按钮上，文字是否会变为绿色？ – ComFreek

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

来源

2013-08-26 13:42:16 ComFreek

谢谢，这对我来说非常合适。我和我的愚蠢空间！ :) – zazvorniki

伟大的，这在IE9中工作！ – Neolisk

在使用'[disabled]'和'：disabled'之间是否有任何偏好的原因？（这也是可链接→https://css-tricks.com/almanac/selectors/d/disabled/） –

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

.btn input

这基本上就是你写的，它会选择具有btn类中的任何元素中<input>元素。

我认为你正在寻找

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

这将选择<input>元素，其的hover，active和focus了三个不同的状态disabled属性和btn类。

来源

2013-08-26 13:41:44

这么说吧，你有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复位避免这种情况。

来源

2013-08-26 13:44:56

这是为什么downvoted？这对现代浏览器来说是一个完美有效的解决方案。 – FakeRainBrigand

谢谢队友。我正要开始思考我的整个CSS职业生涯是一个谎言:) –

@thesaadarshad我刚刚收到我对这个问题的回答upvote。无意中，我也看到了你的回答，我因为一个我不记得了的原因而低估了自己的回答。我做了一个编辑，能够恢复downvote。 +1！ – ComFreek

使用CSS仅禁用输入样式

回答

相关问题