Bagaimana cara menonaktifkan bidang formulir menggunakan CSS?

Apakah mungkin untuk menonaktifkan kolom formulir menggunakan CSS? Saya tentu saja tahu tentang atribut yang dinonaktifkan, tetapi apakah mungkin untuk menentukan ini dalam aturan CSS? Sesuatu seperti -

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

Alasan saya bertanya adalah bahwa, saya memiliki aplikasi di mana bidang formulir di-autogenerasi, dan bidang disembunyikan / ditampilkan berdasarkan beberapa aturan (yang dijalankan dalam Javascript). Sekarang saya ingin memperluasnya untuk mendukung penonaktifan / mengaktifkan bidang, tetapi cara aturan ditulis untuk secara langsung memanipulasi properti gaya bidang formulir. Jadi sekarang saya harus memperluas mesin aturan untuk mengubah atribut serta gaya bidang formulir dan entah bagaimana tampaknya kurang ideal.

Sangat ingin tahu bahwa Anda memiliki properti yang terlihat dan ditampilkan di CSS tetapi tidak mengaktifkan / menonaktifkan. Apakah ada yang seperti itu dalam standar HTML5 yang masih dalam pengerjaan, atau bahkan sesuatu yang tidak standar (khusus browser)?

Ini bisa membantu:

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

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

Memperbarui:

dan jika ingin menonaktifkan dari indeks tab Anda dapat menggunakannya dengan cara ini:

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

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

Anda dapat memalsukan efek yang dinonaktifkan menggunakan CSS.

pointer-events:none;

Anda mungkin juga ingin mengubah warna dll.

Karena aturan berjalan dalam JavaScript, mengapa tidak menonaktifkannya menggunakan javascript (atau dalam contoh kasus saya, jQuery)?

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

MEMPERBARUI

The attrfungsi tidak lagi pendekatan utama untuk ini, seperti yang ditunjukkan di komentar di bawah. Ini sekarang dilakukan dengan propfungsi.

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

Sangat ingin tahu bahwa Anda memiliki properti yang terlihat dan ditampilkan di CSS tetapi tidak mengaktifkan / menonaktifkan.

Sangat ingin tahu bahwa Anda pikir itu sangat aneh. Anda salah memahami tujuan CSS. CSS tidak dimaksudkan untuk mengubah perilaku elemen formulir. Itu dimaksudkan untuk mengubah gaya mereka saja. Menyembunyikan bidang teks tidak berarti bidang teks sudah tidak ada lagi atau browser tidak akan mengirim datanya saat Anda mengirimkan formulir. Yang dilakukannya hanyalah menyembunyikannya dari mata pengguna.

Untuk benar-benar menonaktifkan bidang Anda, Anda harus menggunakan disabledatribut dalam HTML atau disabledproperti DOM dalam JavaScript.

Anda tidak dapat menggunakan CSS untuk menonaktifkan Textbox. solusinya adalah Atribut HTML.

disabled="disabled"

Solusi praktis adalah menggunakan CSS untuk benar-benar menyembunyikan input.

Untuk mengambil kesimpulan ini, Anda dapat menulis dua input html untuk setiap input aktual (satu diaktifkan, dan satu dinonaktifkan) dan kemudian menggunakan javascript untuk mengontrol CSS untuk menampilkan dan menyembunyikannya.

pertama kali menjawab sesuatu, dan sepertinya agak terlambat ...

Saya setuju melakukannya dengan javascript, jika Anda sudah menggunakannya.

Untuk struktur komposit, seperti yang biasanya saya gunakan, saya telah membuat elemen pseudo setelah css untuk memblokir elemen dari interaksi pengguna, dan memungkinkan gaya tanpa harus memanipulasi seluruh struktur.

Sebagai contoh:

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

Saya bisa menempatkan disabledkelas di bungkusnyadiv

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

Ini akan mengaburkan teks di dalam divdan membuatnya tidak dapat digunakan oleh pengguna.

Contoh saya JSFiddle

Saya selalu menggunakan:

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

dan kemudian menerapkan kelas css ke bidang input:

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

masukan [nama = nama pengguna] {dinonaktifkan: true; /* Tidak bekerja */ }

Saya tahu pertanyaan ini cukup lama tetapi untuk pengguna lain yang menemukan masalah ini, saya kira cara termudah untuk menonaktifkan input adalah dengan ': dinonaktifkan'

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

Pada kenyataannya, jika Anda memiliki beberapa skrip untuk menonaktifkan input secara dinamis / otomatis dengan javascript atau jquery yang secara otomatis akan dinonaktifkan berdasarkan kondisi yang Anda tambahkan.

Di jQuery untuk Contoh:

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

Semoga jawaban dalam CSS membantu.

Anda tidak dapat melakukan itu, saya khawatir, tetapi Anda dapat melakukan hal berikut di jQuery, jika Anda tidak ingin menambahkan atribut ke bidang. Tempatkan ini di dalam <head></head>tag Anda

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

Jika Anda membuat bidang dalam DOM (dengan JS), Anda harus melakukan ini sebagai gantinya:

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

Ini dapat dilakukan untuk tujuan yang tidak kritis dengan meletakkan overlay di atas elemen input Anda. Inilah contoh saya dalam HTML dan CSS murni.

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>

Tidak ada cara untuk menggunakan CSS untuk tujuan ini. Saran saya adalah memasukkan kode javascript di mana Anda menetapkan atau mengubah kelas css yang diterapkan pada input. Sesuatu seperti itu :

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>

Variasi untuk pointer-events: none;solusi, yang menyelesaikan masalah input masih dapat diakses melalui itu diberi label kontrol atau tabindex, adalah untuk membungkus input dalam div, yang ditata sebagai input teks yang dinonaktifkan, dan pengaturan input { visibility: hidden; }ketika input "dinonaktifkan" .
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>

Gaya penonaktifan yang diterapkan dalam cuplikan di atas diambil dari UI Chrome dan mungkin tidak identik secara visual dengan masukan yang dinonaktifkan di peramban lain. Mungkin ini dapat dikustomisasi untuk masing-masing browser menggunakan perbaikan-ekstensi CSS khusus mesin. Meskipun sekilas, saya tidak berpikir itu bisa:
ekstensi Microsoft CSS , ekstensi Mozilla CSS , ekstensi WebKit CSS

Tampaknya jauh lebih masuk akal untuk memperkenalkan nilai tambahan visibility: disabledatau display: disabledatau bahkan mungkin appearance: disabled, mengingat yang visibility: hiddensudah mempengaruhi perilaku elemen yang berlaku elemen kontrol terkait.