Cara Menggunakan pseudo-class :read-write pada HTML dan CSS

Halo teman-teman, pada kesempatan kali ini saya akan menjelaskan tentang Cara Menggunakan pseudo-class :read-write pada CSS.:read-write adalah salah satu value pada property pseudo-class, element <input> pada jenis apapun yang tidak read-only dan yang tidak cacat. Ini berarti bahwa mereka tidak memiliki yang dibaca atribut set, bukan atribut cacat. <textarea> yang tidak hanya baca atau cacat (mirip dengan input).

Elemen lain yang bukan <input> atau <textarea>, dan yang memiliki atribut contenteditable ditetapkan.

Berikut ini adalah contoh dari elemen yang bisa dipilih dengan menggunakan: read-write:

<input type="text">

<input type="number">

<textarea name="address" id="id" cols="30" rows="10"> </textarea>

<div class="random" contenteditable> </div>

Berikut ini adalah contoh dari unsur yang tidak dapat dipilih menggunakan: read-write:

<input type="text" disabled>

<input type="number" disabled>

<input type="number" readonly>

<textarea name="nm" id="id" cols="30" rows="10" readonly> </textarea>

<div class="random"> </div> <!-- untuk biasa tidak bisa di contenteditable  -->

Meskipun ini menjadi perilaku yang direkomendasikan oleh spesifikasi, perilaku peramban tampaknya berbeda-apa yang dianggap :read-write. Dalam satu browser dianggap hanya baca di tempat lain, dan karena itu gaya teman-teman menerapkan menggunakan :read-write tidak dapat diterapkan di beberapa browser.

:read-write memiliki rekan yang hampir sama fungsinya yaitu :read-only sesama dari pseudo-class yang fungsinya sesuai dengan namanya.

Sama seperti penyeleksi pseudo-class yang lain,: read-write selector dapat dirantai dengan pemilih lainnya seperti: hover dan dengan pseudo-elemen seperti :: setelah, antara lain. Misalnya, aturan berikut ini akan memberikan: fokus gaya untuk area teks yang dapat diedit:

textarea:read-write:focus {
    box-shadow: 0 0 2px 1px rgba(0,0,0,0.2);
}

textarea:read-write:before {
    content: "Type here...";
    color: #aaa;
}

Contoh:

Berikut ini akan memilih semua elemen pada halaman yang dapat diedit menggunakan atribut contenteditable, dan menerapkan perbatasan hijau untuk mereka.

[contenteditable]:read-write {
    border: 1px solid green;
}

Berikut akan memilih semua field input dan textarea yang dapat diedit dan menerapkan gaya fokus kepada mereka

input:read-write:focus, textarea:read-write:focus {
    box-shadow: 0 0 3px 1px rgba(0, 0, 100, .2);
}

Semoga bermanfaat ya teman-teman.

Cara Menggunakan pseudo-class :read-write pada CSS

Contoh:

Kategori