Jak wyłączyć pola formularzy za pomocą CSS?

Czy można wyłączyć pola formularzy za pomocą CSS? Oczywiście wiem o wyłączonym atrybucie, ale czy można to określić w regule CSS? Coś jak -

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

Pytam o to, że mam aplikację, w której pola formularzy są generowane automatycznie, a pola są ukrywane / pokazywane na podstawie pewnych reguł (które działają w Javascript). Teraz chcę go rozszerzyć, aby obsługiwał wyłączanie / włączanie pól, ale sposób, w jaki reguły są napisane, aby bezpośrednio manipulować właściwościami stylu pól formularza. Więc teraz muszę rozszerzyć silnik reguł, aby zmienić atrybuty, a także styl pól formularzy i jakoś wydaje się to mniej niż idealne.

To bardzo ciekawe, że masz widoczne i wyświetlane właściwości w CSS, ale nie włączasz / wyłączasz. Czy jest coś podobnego w wciąż niepracującym standardzie HTML5, czy nawet coś niestandardowego (specyficznego dla przeglądarki)?

Może to być pomocne:

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

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

Aktualizacja:

a jeśli chcesz wyłączyć z indeksu zakładek, możesz go użyć w ten sposób:

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

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

Możesz sfałszować efekt wyłączenia za pomocą CSS.

pointer-events:none;

Możesz także chcieć zmienić kolory itp.

Ponieważ reguły działają w JavaScript, dlaczego nie wyłączyć ich za pomocą javascript (lub w moim przypadku jQuery)?

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

AKTUALIZACJA

attrFunkcja nie jest już podstawowym podejście do tego, co zostało podkreślone w komentarzach poniżej. Odbywa się to teraz za pomocą propfunkcji.

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

To bardzo ciekawe, że masz widoczne i wyświetlane właściwości w CSS, ale nie włączasz / wyłączasz.

To bardzo ciekawe, że myślisz, że to bardzo ciekawe. Nie rozumiesz celu CSS. CSS nie ma na celu zmiany zachowania elementów formularza. Ma zmienić tylko ich styl . Ukrycie pola tekstowego nie oznacza, że ​​to pole już tam nie istnieje lub że przeglądarka nie wyśle ​​swoich danych po przesłaniu formularza. Wszystko, co robi, to ukrywanie go przed oczami użytkownika.

Aby faktycznie wyłączyć pola, musisz użyć disabledatrybutu w HTML lub disabledwłaściwości DOM w JavaScript.

Nie możesz użyć CSS do wyłączenia Textbox. rozwiązaniem byłby atrybut HTML.

disabled="disabled"

Praktycznym rozwiązaniem jest użycie CSS do faktycznego ukrycia danych wejściowych.

Aby dojść do naturalnego wniosku, możesz napisać dwa wejścia HTML dla każdego rzeczywistego wejścia (jedno włączone i jedno wyłączone), a następnie użyć javascript do sterowania CSS, aby je pokazać i ukryć.

odpowiadanie za pierwszym razem i pozornie trochę spóźnione ...

Wyrażam zgodę na zrobienie tego przez javascript, jeśli już go używasz.

W przypadku struktury kompozytowej, jakiej zwykle używam, utworzyłem pseudo po elemencie css, aby zablokować elementy przed interakcją użytkownika i umożliwić stylizację bez konieczności manipulowania całą strukturą.

Na przykład:

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

Mogę umieścić disabledzajęcia na opakowaniudiv

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

Spowoduje to wyszarzenie tekstu w divelemencie i uczyni go bezużytecznym dla użytkownika.

Mój przykład JSFiddle

Zawsze używam:

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

a następnie zastosuj klasę css do pola wejściowego:

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

input [name = username] {disabled: true; /* Nie działa */ }

Wiem, że to pytanie jest dość stare, ale dla innych użytkowników, którzy napotykają ten problem, przypuszczam, że najłatwiejszym sposobem na wyłączenie wprowadzania jest po prostu „: wyłączone”

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

W rzeczywistości, jeśli masz jakiś skrypt, który wyłącza dane wejściowe dynamicznie / automatycznie za pomocą javascript lub jquery, które wyłączyłyby się automatycznie na podstawie dodanego warunku.

Na przykład w jQuery:

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

Mam nadzieję, że odpowiedź w CSS pomoże.

Obawiam się, że nie możesz tego zrobić, ale możesz wykonać następujące czynności w jQuery, jeśli nie chcesz dodawać atrybutów do pól. Po prostu umieść to w swoim <head></head>tagu

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

Jeśli generujesz pola w DOM (z JS), powinieneś zamiast tego zrobić:

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

Można to zrobić w niekrytycznym celu, nakładając nakładkę na element wejściowy. Oto mój przykład w czystym HTML i 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>

Nie ma możliwości wykorzystania CSS do tego celu. Radzę dołączyć kod javascript, w którym można przypisać lub zmienić klasę css zastosowaną do danych wejściowych. Coś w tym stylu :

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>

Odmianą pointer-events: none;rozwiązania, które rozwiązuje problem z wejściem nadal dostępnym za pomocą kontrolki oznaczonej etykietą lub tabindeksu, jest zawijanie danych wejściowych w element div, który jest stylizowany na wyłączone wprowadzanie tekstu, i ustawienie, input { visibility: hidden; }kiedy wejście jest „wyłączone” .
Ref: 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>

Wyłączony styl zastosowany w powyższym fragmencie pochodzi z interfejsu użytkownika Chrome i może nie być wizualnie identyczny z wyłączonymi danymi wejściowymi w innych przeglądarkach. Możliwe, że można go dostosować do poszczególnych przeglądarek za pomocą specyficznych dla silnika przedrostków rozszerzeń CSS. Choć na pierwszy rzut oka, nie sądzę, że mógł:
Microsoft rozszerzeń CSS , Mozilla rozszerzeń CSS , rozszerzenia CSS WebKit

O wiele bardziej rozsądne wydaje się wprowadzenie dodatkowej wartości, visibility: disableda display: disabledmoże nawet appearance: disabled, biorąc pod uwagę, że visibility: hiddenwpływa to już na zachowanie odpowiednich elementów, wszelkich powiązanych elementów sterujących.