Як відключити поля форми за допомогою 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 pseudo after element, щоб блокувати елементи взаємодії з користувачем та дозволити стилізацію, не маніпулюючи цілою структурою.

Наприклад:

<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" />

введення [ім'я = ім'я користувача] {відключено: вірно; /* Не працює */ }

Я знаю, що це питання досить старе, але для інших користувачів, які стикаються з цією проблемою, я вважаю, що найпростіший спосіб відключити введення - це просто ": 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вже впливає на поведінку застосовуваних елементів будь-яких пов'язаних елементів управління.