Bagaimana gaya atribut readonly dengan CSS?

Saat ini saya menggunakan readonly = "readonly" untuk menonaktifkan bidang. Saya sekarang mencoba gaya atribut menggunakan CSS. Saya sudah mencoba menggunakan

input[readonly] {
/*styling info here*/
}

tetapi tidak bekerja karena suatu alasan. Saya juga sudah mencoba

input[readonly='readonly'] {
/*styling info here*/
}

itu juga tidak berhasil.

Bagaimana saya bisa menata atribut readonly dengan CSS?

input[readonly]
{
    background-color:blue;
}

https://curtistimson.co.uk/post/css/style-readonly-attribute-css/

Catatan yang textarea[readonly="readonly"]berfungsi jika Anda mengatur readonly="readonly"dalam HTML tetapi TIDAK bekerja jika Anda mengatur readOnly-atribusi ke trueatau "readonly"melalui JavaScript.

Agar pemilih CSS berfungsi jika Anda mengatur readOnlydengan JavaScript, Anda harus menggunakan pemilih textarea[readonly].

Perilaku yang sama di Firefox 14 dan Chrome 20.

Agar aman, saya menggunakan kedua penyeleksi.

textarea[readonly="readonly"], textarea[readonly] {
...
}

Agar aman, Anda mungkin ingin menggunakan keduanya ...

input[readonly], input[readonly="readonly"] {
    /*styling info here*/
}

Atribut readonly adalah "atribut boolean", yang dapat berupa kosong atau "readonly" (satu-satunya nilai yang valid). http://www.whatwg.org/specs/web-apps/current-work/#boolean-attribute

Jika Anda menggunakan sesuatu seperti .prop('readonly', true)fungsi jQuery , Anda akhirnya akan membutuhkan [readonly], sedangkan jika Anda menggunakan .attr("readonly", "readonly")maka Anda akan membutuhkannya [readonly="readonly"].

Koreksi: Anda hanya perlu menggunakan input[readonly]. Termasuk input[readonly="readonly"]mubazir. Lihat https://stackoverflow.com/a/19645203/1766230

Banyak jawaban di sini, tetapi belum melihat yang saya gunakan:

input[type="text"]:read-only { color: blue; }

Perhatikan tanda hubung pada pemilih semu. Jika inputnya readonly="false"itu akan menangkap itu juga karena pemilih ini menangkap keberadaan readonly terlepas dari nilai. Secara teknis falsetidak valid menurut spesifikasi, tetapi internet bukanlah dunia yang sempurna. Jika Anda perlu menutup kasing itu, Anda bisa melakukan ini:

input[type="text"]:read-only:not([read-only="false"]) { color: blue; }

textarea bekerja dengan cara yang sama:

textarea:read-only:not([read-only="false"]) { color: blue; }

Perlu diingat bahwa html sekarang mendukung tidak hanya type="text", tetapi membunuh jenis tekstual lainnya seperti number, tel, email, date, time, url, dll Setiap akan perlu ditambahkan ke pemilih.

Ada beberapa cara untuk melakukan ini.

Yang pertama adalah yang paling banyak digunakan. Ini bekerja di semua browser utama.

input[readonly] {
 background-color: #dddddd;
}

Sementara yang di atas akan memilih semua input yang readonlydilampirkan, yang di bawah ini hanya akan memilih apa yang Anda inginkan. Pastikan untuk mengganti demodengan tipe input apa pun yang Anda inginkan.

input[type="demo"]:read-only {
 background-color: #dddddd;
}

Ini adalah alternatif dari yang pertama, tetapi tidak banyak digunakan:

input:read-only {
 background-color: #dddddd;
}

The :read-onlypemilih didukung dalam Chrome, Opera, dan Safari. Penggunaan Firefox :-moz-read-only. IE tidak mendukung :read-onlypemilih.

Anda juga dapat menggunakan input[readonly="readonly"], tetapi ini hampir sama dengan input[readonly], dari pengalaman saya.

input[readonly], input:read-only {
    /* styling info here */
}

Harus menutupi semua kasing untuk bidang input yang hanya dibaca ...

kapitalisasi huruf pertama Hanya

input[readOnly] {
      background: red !important;
    }

<input type="text" name="country" value="China" readonly="readonly" />

Jika Anda memilih input oleh id dan kemudian menambahkan input[readonly="readonly"]tag di css, sesuatu seperti:

 #inputID input[readonly="readonly"] {
     background-color: #000000;
 }

Itu tidak akan berhasil. Anda harus memilih kelas atau id induk lalu input. Sesuatu seperti:

 .parentClass, #parentID input[readonly="readonly"] {
     background-color: #000000;
 }

2 sen saya sambil menunggu tiket baru di tempat kerja: D

Gunakan yang berikut ini untuk bekerja di semua browser:

 var readOnlyAttr = $('.textBoxClass').attr('readonly');
    if (typeof readOnlyAttr !== 'undefined' && readOnlyAttr !== false) {
        $('.textBoxClass').addClass('locked');
    }