使用css对禁用的输入进行样式化 [英] Styling a disabled input with css only

问题描述

我有一种奇怪的情况。我试图风格禁用输入按钮，因为我有一个恼人的悬停将文本转换为白色。这使得用户感到困惑，因为它像一个普通的按钮。

I have sort of a strange situation. I'm trying to style a disabled input button because I have an annoying hover turning the text to white. This makes it confusing to the user because its acting like a normal button.

我已经尝试了几个东西，主要是CSS和一些jQuery的东西。我想保持这在css如果一切顺利。

I have tried a few things, mainly css and a few jQuery things. I would like to keep this in css if at all posable.

这是我的html，对不起，它是一个简单的形式助手。

This is my html, sorry it is in a larvel form helper.

{{ 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
}

任何帮助都很棒！

推荐答案

使用此CSS（ jsFiddle示例）：

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

你必须写最左边的元素和最右边的元素。

You have to write the most outer element on the left and the most inner element on the right.

.btn：hover input [disabled] 将选择包含在具有类的元素中的任何禁用的输入元素 btn 。

.btn:hover input[disabled] would select any disabled input elements contained in an element with a class btn which is currently hovered by the user.

方式，Laravel（PHP）生成HTML - 而不是浏览器。

By the way, Laravel (PHP) generates the HTML - not the browser.

这篇关于使用css对禁用的输入进行样式化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！