Как отключить поля формы с помощью CSS?

Можно ли отключить поля формы с помощью CSS? Я, конечно, знаю об отключенном атрибуте, но можно ли это указать в правиле CSS? Что-то вроде -

<input type="text" name="username" value="admin" >
<style type="text/css">
  input[name=username] {
    disabled: true; /* Does not work */
  }
</style>

Причина, по которой я спрашиваю, состоит в том, что у меня есть приложение, в котором поля формы генерируются автоматически, а поля скрыты / показаны на основе некоторых правил (которые выполняются в Javascript). Теперь я хочу расширить его для поддержки отключения / включения полей, но способ написания правил для непосредственной манипуляции со свойствами стиля полей формы. Так что теперь мне нужно расширить механизм правил для изменения атрибутов, а также стиля полей форм, и почему-то это кажется не идеальным.

Очень любопытно, что у вас есть видимые и отображаемые свойства в CSS, но вы не можете включать / отключать. Есть ли что-то подобное в стандарте HTML5, который все еще работает, или даже что-то нестандартное (специфично для браузера)?

Это может быть полезно:

<input type="text" name="username" value="admin" >

<style type="text/css">
input[name=username] {
    pointer-events: none;
 }
</style>

Обновить:

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

 <input type="text" name="username" value="admin" tabindex="-1" >

 <style type="text/css">
  input[name=username] {
    pointer-events: none;
   }
 </style>

Вы можете подделать отключенный эффект, используя CSS.

pointer-events:none;

Вы также можете изменить цвета и т. Д.

Поскольку правила выполняются в JavaScript, почему бы не отключить их с помощью javascript (или, в моем случае, jQuery)?

$('#fieldId').attr('disabled', 'disabled'); //Disable
$('#fieldId').removeAttr('disabled'); //Enable

ОБНОВИТЬ

Эта attrфункция больше не является основным подходом к этому, как было указано в комментариях ниже. Теперь это сделано с помощью propфункции.

$( "input" ).prop( "disabled", true ); //Disable
$( "input" ).prop( "disabled", false ); //Enable

Очень любопытно, что у вас есть видимые и отображаемые свойства в CSS, но вы не можете включать / отключать.

Это очень любопытно, что вы думаете, что это очень любопытно. Вы неправильно понимаете цель CSS. CSS не предназначен для изменения поведения элементов формы. Он предназначен только для изменения их стиля . Скрытие текстового поля не означает, что текстовое поле больше не существует или что браузер не отправит свои данные при отправке формы. Все, что он делает, это скрывает это от глаз пользователя.

Чтобы фактически отключить ваши поля, вы должны использовать disabledатрибут в HTML или disabledсвойство DOM в JavaScript.

Вы не можете использовать CSS, чтобы отключить Textbox. решением будет HTML атрибут.

disabled="disabled"

Практическое решение - использовать CSS, чтобы фактически скрыть ввод.

Чтобы сделать это естественным образом, вы можете написать два html-ввода для каждого фактического ввода (один включен, а другой отключен), а затем использовать javascript для управления CSS, чтобы показать и скрыть их.

впервые отвечая на что-то, и, казалось бы, немного поздно ...

Я согласен сделать это с помощью JavaScript, если вы уже используете его.

Для составной структуры, которую я обычно использую, я создал псевдо-элемент css, чтобы заблокировать элементы от взаимодействия с пользователем и разрешить стилизацию, не манипулируя всей структурой.

Например:

<div id=test class=stdInput>
    <label class=stdInputLabel for=selecterthingy>A label for this input</label>
    <label class=selectWrapper>
         <select id=selecterthingy>
             <option selected disabled>Placeholder</option>
             <option value=1>Option 1</option>
             <option value=2>Option 2</option>
         </select>
    </label>
</div>

Я могу разместить disabledкласс на упаковкеdiv

.disabled { 
    position : relative; 
    color    : grey;
}
.disabled:after {
    position :absolute;
    left     : 0;
    top      : 0;
    width    : 100%;
    height   : 100%;
    content  :' ';
}

Это будет серый текст внутри divи сделает его непригодным для использования пользователем.

Мой пример JSFiddle

Я всегда использую:

input.disabled {
    pointer-events:none;
    color:#AAA;
    background:#F5F5F5;
}

и затем применение класса css к полю ввода:

<input class="disabled" type="text" value="90" name="myinput" id="myinput" />

input [name = username] {disabled: true; /* Не работает */ }

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

<input type="text" name="username" value="admin" disabled />
<style type="text/css">
  input[name=username]:disabled {
    opacity: 0.5 !important; /* Fade effect */
    cursor: not-allowed; /* Cursor change to disabled state*/
  }
</style>

В действительности, если у вас есть сценарий для динамического / автоматического отключения ввода с помощью javascript или jquery, который автоматически отключается в зависимости от добавленного вами условия.

В jQuery для примера:

if (condition) {
// Make this input prop disabled state
  $('input').prop('disabled', true);
}
else {
// Do something else
}

Надеюсь, ответ в CSS поможет.

Боюсь, вы не можете этого сделать, но вы можете сделать следующее в jQuery, если вы не хотите добавлять атрибуты в поля. Просто поместите это в свой <head></head>тег

$(document).ready(function(){ 
  $(".inputClass").focus(function(){
    $(this).blur();
  }); 
});

Если вы генерируете поля в DOM (с помощью JS), вы должны сделать это вместо этого:

$(document).ready(function(){ 
  $(document).on("focus", ".inputClass", function(){
    $(this).blur();
  }); 
});

Это можно сделать для некритических целей, поместив наложение поверх элемента ввода. Вот мой пример в чистом HTML и CSS.

https://jsfiddle.net/1tL40L99/

    <div id="container">
        <input name="name" type="text" value="Text input here" />
        <span id="overlay"></span>
    </div>

    <style>
        #container {
            width: 300px;
            height: 50px;
            position: relative;
        }
        #container input[type="text"] {
            position: relative;
            top: 15px;
            z-index: 1;
            width: 200px;
            display: block;
            margin: 0 auto;
        }
        #container #overlay {
            width: 300px;
            height: 50px;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 2;
            background: rgba(255,0,0, .5);
        }
    </style>

Нет способа использовать CSS для этой цели. Мой совет - включить код JavaScript, где вы назначаете или изменяете класс css, применяемый к входным данным. Что-то такое :

function change_input() {
	$('#id_input1')
		.toggleClass('class_disabled')
		.toggleClass('class_enabled');
		
	$('.class_disabled').attr('disabled', '');
	$('.class_enabled').removeAttr('disabled', '');
}

.class_disabled { background-color : #FF0000; }
.class_enabled { background-color : #00FF00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form> 	
	Input: <input id="id_input1" class="class_enabled" />		
	<input type="button" value="Toggle" onclick="change_input()";/>	
</form>

Разновидность к pointer-events: none;решению, которое решает вопрос о входной еще быть доступным через это меченый контроль или TabIndex, чтобы обернуть ввод в DIV, который стилизован инвалидом ввода текста и настройки input { visibility: hidden; }при входе «отключен» ,
Ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values

div.dependant {
  border: 0.1px solid rgb(170, 170, 170);
  background-color: rgb(235,235,228);
  box-sizing: border-box;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type {
  display: inline-block;
}
input[type="checkbox"]:checked ~ div.dependant:first-of-type {
  display: contents;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type > input {
  visibility: hidden;
}

<form>
  <label for="chk1">Enable textbox?</label>
  <input id="chk1" type="checkbox" />
  <br />
  <label for="text1">Input textbox label</label>
  <div class="dependant">
    <input id="text1" type="text" />
  </div>
</form>

Отключенный стиль, примененный в приведенном выше фрагменте, взят из пользовательского интерфейса Chrome и может не совпадать визуально с отключенными входами в других браузерах. Возможно, его можно настроить для отдельных браузеров, используя специфичные для движка CSS-префиксы. Хотя на первый взгляд, я не думаю , что он может:
расширения Microsoft CSS , Mozilla расширений CSS , WebKit CSS расширений

Казалось бы, гораздо более разумно ввести дополнительное значение visibility: disabledили, display: disabledвозможно, даже appearance: disabled, учитывая, что это visibility: hiddenуже влияет на поведение применимых элементов любых связанных элементов управления.