CSS Academy · Pelajaran

::placeholder ::selection dan ::marker

Atur gaya placeholder input, pilihan teks, dan bullet penanda daftar dengan pseudo-element.

::placeholder ::selection dan ::marker adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

::placeholder

::placeholder mengatur gaya teks pengganti di dalam elemen masukan formulir dan textarea. Hanya sebagian properti CSS yang didukung.

<input type="text" placeholder="Type your name…" />

Properti ::placeholder yang Didukung

Tidak semua properti CSS berfungsi pada ::placeholder. Properti yang didukung meliputi: color, font-size, font-weight, font-style, letter-spacing, opacity, dan beberapa properti lainnya. Properti tata letak tidak didukung.

Aksesibilitas Placeholder

Teks pengganti menghilang saat pengguna mengetik dan TIDAK boleh digunakan sebagai pengganti elemen <label>. Selalu sediakan label yang terlihat untuk bidang formulir. Kontras teks pengganti juga harus memenuhi rasio WCAG 4.5:1.

::selection

::selection mengatur gaya teks yang disorot pengguna dengan kursor. Fitur ini membuat warna seleksi yang sesuai dengan merek.

<p>Select this text with your cursor to see the branded highlight color.</p>

Properti yang Didukung ::selection

Hanya beberapa properti yang berfungsi dengan ::selection: color, background-color, text-shadow, dan text-decoration. Properti lainnya diabaikan.

::marker

::marker mengatur gaya penanda butir daftar — tanda bulat atau angka dalam daftar <ul> dan <ol>.

<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>
<ol>
  <li>Step one</li>
  <li>Step two</li>
</ol>

Properti yang Didukung ::marker

Properti ::marker yang didukung meliputi: color, content, font-size, font-family, font-weight, font-style, dan unicode-bidi.

Penanda Daftar Kustom dengan ::marker

Gunakan emoji atau karakter khusus sebagai penanda daftar:

<ul>
  <li>Normal item</li>
  <li class="warning">Warning item</li>
</ul>

::first-line

::first-line mengatur gaya baris pertama yang dirender dari elemen blok — baris aktual sebagaimana dirender, bukan pemisah baris pertama dalam HTML. Fitur ini berguna untuk gaya paragraf pembuka seperti huruf awal besar.

<p>This is the opening line of a paragraph that wraps onto a second line once it runs out of horizontal room in its container, so you can see the effect clearly.</p>

::first-letter

::first-letter menargetkan huruf pertama dari baris pertama yang diformat. Penggunaan klasiknya adalah membuat huruf awal besar dalam tipografi bergaya majalah.

<p>Once upon a time, a designer discovered the drop cap and typography was never the same again.</p>

::cue untuk Gaya Subtitel

::cue mengatur gaya subtitel VTT dalam elemen <video> HTML — elemen semu khusus yang penting untuk media yang mudah diakses.

<p style="color:#888;">::cue styles VTT subtitle text inside a &lt;video&gt; element (no visible effect without an active video/track, shown here for reference).</p>
<video controls style="max-width:100%;"></video>

Pemeriksaan Singkat

Elemen semu mana yang memungkinkan Anda mengatur gaya tanda bulat atau angka pada suatu butir daftar?

Ringkasan

::placeholder mengatur gaya teks pengganti pada masukan. ::selection mengatur gaya teks yang disorot. ::marker mengatur gaya tanda bulat dan angka pada daftar. ::first-letter dan ::first-line memungkinkan penyempurnaan tipografi. Semuanya hanya mendukung sebagian kecil properti CSS.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “::placeholder ::selection dan ::marker” gratis?

Ya — teks lengkap “::placeholder ::selection dan ::marker” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “::placeholder ::selection dan ::marker”?

Atur gaya placeholder input, pilihan teks, dan bullet penanda daftar dengan pseudo-element. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “::placeholder ::selection dan ::marker” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke CSS Academy