Стилизация отключенного ввода только с помощью css

У меня странная ситуация. Я пытаюсь стилизовать отключенную кнопку ввода, потому что у меня есть раздражающий наведение, превращающее текст в белый. Это делает его запутанным для пользователя, потому что он действует как обычная кнопка.

Я пробовал несколько вещей, в основном 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
}

Любая помощь будет замечательной!

Ответы

Ответ 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 - не браузер.

Ответ 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.

Ответ 3

Пространство в селекторе CSS выбирает дочерние элементы.

.btn input

Это в основном то, что вы написали, и он будет выбирать элементы <input> в любом элементе с классом btn.

Я думаю, что вы ищете

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

Это выберет <input> элементы с атрибутом disabled и классом btn в трех разных состояниях hover, active и focus.