Как создать ярлык HTML для отключенного ввода

Я бы хотел, чтобы метки для моих элементов формы были выделены серым цветом, если вход отключен, и я не могу заставить его работать для ввода текста. Я пробовал следующее:

input:disabled {
    background:#dddddd;
}

input:disabled+label{color:#ccc;}

<input type='checkbox' disabled id='check1'>
<label for='check1'>Check</label>
<br>
<label for='text1'>Text</label>
<input type='text' id='text1' disabled>

Js Fiddle

Стилирование работает с меткой флажка, но не с текстовой меткой. Являются ли флажки только входными типами, которые позволяют создавать свои метки через css?

Я тестирую с помощью Firefox.

Ответ 1

На основе комментария, сделанного @andi:

input:disabled+label означает, что метка сразу же после входа. В вашем HTML метка появляется перед вводом текста. (но нет CSS для "раньше".)

Он абсолютно прав. Но это не должно мешать нам решить проблему с небольшим обманом!

Первый шаг: замените порядок элементов HTML так, чтобы <label> появился после <input>. Это позволит правилам стилизации работать по желанию.

HTML

<input type="checkbox" id="check1" disabled="disabled">
<label for="check1">Check</label>
<br>
<input type="text" id="text1" disabled="disabled">
<label for="text1">Text</label>
<br>
<input type="checkbox" id="check2">
<label for="check2">Check</label>
<br>
<input type="text" id="text2">
<label for="text2">Text</label>

Теперь забавный бит: используйте CSS для размещения меток для текстовых входов с левой стороны:

CSS

input[type=text]+label {
    float: left;
}

ДЕМО: http://jsfiddle.net/F2Nh4/5/

Ответ 2

Вы также можете использовать поплавки и всегда помещать метку после ввода Demo

Вам придется обернуть его в промежутке (или в любом другом элементе).

HTML:

<span>
    <input type='checkbox' disabled id='check1'>
    <label for='check1'>Check</label>
</span>
<br>
<span>
    <input type='text1' id='text1' disabled>
    <label for='check'>Text</label>
</span>

CSS:

span {
    display: inline-block;
    overflow: hidden;
}

input {
    float: right;
}

label {
    float: left;
}

input:disabled {
    background:#dddddd;
}

input + label {
    float: none;
}

input:disabled + label {
    color:#ccc;
}

Ответ 3

Вы можете использовать селектор атрибутов в CSS, например https://jsfiddle.net/8pp6mpp5/1/

HTML

<label disabled="disabled">Hola Mundo!</label></br>
<label>Hola Mundo!</label>`

CSS

label[disabled="disabled"]{
    background-color: #AAA;
}

Ответ 4

Этот селектор input:disabled+label{color:#ccc;} предназначен для элементов метки, которые помещаются после того, как отключенный элемент ввода

В этом фрагменте ярлык находится после отключенного ввода, поэтому элемент метки серый

<input type='checkbox' disabled id='check1'>
<label for='check1'>Check</label>

В этом случае метка перед входом, поэтому селектор не применим к ней

<label for='text1'>Text</label>
<input type='text' id='text1' disabled>

Возможное решение - обернуть ваши элементы в дополнительный div и применить имя класса к div, что-то вроде этого

<div class='disabled'>
    <input type='checkbox' disabled id='check1'>
    <label for='check1'>Check</label>
</div>
<div class='disabled'>
    <label for='text1'>Text</label>
    <input type='text' id='text1' disabled>
</div>

И тогда вы можете написать свой css, как этот

.disabled label {
    color: #ccc;
}