Bagaimana gaya atribut readonly dengan CSS?


150

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?


12
input[readonly]harus bekerja. Pastikan itu tidak ditimpa oleh penyeleksi lainnya, yang lebih spesifik di tempat lain di lembar gaya Anda.
BoltClock

1
jika Anda ingin menonaktifkan, maka gunakan atribut yang dinonaktifkan dan tidak hanya baca
Sven Bieder

3
@SvenBieder Hanya baca dan dinonaktifkan memiliki perilaku yang berbeda sama sekali. Bidang yang hanya baca yang dikirim ke server pada formulir dikirimkan sementara bidang yang dinonaktifkan tidak.
Naren

3
input[readonly='readonly']hanya akan berfungsi jika Anda menggunakan HTML like <input readonly="readonly">, bukan untuk eg <input readonly>. input[readonly]harus cocok dengan keduanya.
Mathias Bynens

1
!importantharus bekerja untuk mengesampingkan, kecuali jika Anda memiliki !importantkelas pengaturan?
Matt K

Jawaban:


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

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


24
Anda harus menggunakannya input[readonly]sebagai readonlyatribut Boolean yang tidak dirancang untuk memiliki nilai tertentu.
BoltClock

1
@BoltClock Ya. Silakan lihat resolusi dalam Jawaban di bawah ini.
Pal R

Bagaimana saya bisa membuatnya bisa ditulisi lagi? Hanya menghapus gaya kelas?
Renaro Santos

@RenaroSantos Itulah perubahan HTML. Hapus readonly="readonly"dari Anda inputelemen.
Curt

w / IE7 Anda masih dapat menggunakan pemilih dengan jQuery
ladieu

69

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] {
...
}

18
Anda sebaiknya menggunakan textarea[readonly]saja - setiap textarea[readonly="readonly"]dijamin cocok dengan itu.
BoltClock

23

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


20

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.


2
Aku juga. LOL Ya, kau benar! Untuk sekarang. :read-onlydan pemilih psuedo lainnya telah ditambahkan ke standar W3C dan dapat digunakan dengan pratinjau IE 10 build 10547 dan lebih tinggi.
IAmNaN

6

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.


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

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


input: read-only adalah "mutability pseudo-class yang bertujuan membuat style styling lebih mudah berdasarkan atribut HTML yang dinonaktifkan, dapat dibaca, dan dapat diedit " Seperti disebutkan di sini, css-tricks.com/almanac/selectors/r/read-write-read , berbagai implementasi cukup miring.
peater

Ini aneh tetapi hanya input [readonly] yang bekerja untuk saya di FF 58
Pavel_K

3

kapitalisasi huruf pertama Hanya

input[readOnly] {
      background: red !important;
    }
<input type="text" name="country" value="China" readonly="readonly" />


2

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


"Jika Anda memilih input berdasarkan id" - mana OP tidak, jadi bagaimana ini relevan? Bahkan jika itu yang terjadi, Anda salah, Anda hanya perlu menghapus kombinasi keturunan.
Quentin

AH ok maksudmu saya harus mengetikkan sesuatu seperti input [readonly = "readonly"] # inputID? / saya bodoh .. Anda benar
softwareplay

1

Gunakan yang berikut ini untuk bekerja di semua browser:

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

2
Jadi, harap audiens target Anda tidak dalam 2% itu.
Bacco

Apa yang termasuk kelas 'terkunci' ??
AdiT

$ ('. textBoxClass'). addClass ('dikunci') akan termasuk 'dikunci'
Pal R
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.