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

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

  input[name=username] { disabled: true; /* Does not work */ }  

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

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

Вы можете подделать отключенный эффект с помощью 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 для отключения текстового поля. решение будет атрибутом HTML.

 disabled="disabled" 

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

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

первый раз, отвечая на что-то, и, похоже, немного опоздал …

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

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

Например:

 

Я могу поместить disabled class на обертку 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; } 

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

  

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

 $(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/

  

Для этой цели невозможно использовать CSS. Мой совет состоит в том, чтобы включить javascript-код, где вы назначаете или изменяете class 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; } 
  
Input:

input [name = имя пользователя] {disabled: true; /* Не работает */ }

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

   

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

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

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

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