Input bentuk gaya tersuai dengan ciri CSS moden

Pada masa kini, membina kotak semak tersuai, butang radio, dan suis togol adalah sempurna, sambil mengekalkan semantik dan aksesibiliti. Kami tidak memerlukan garis kod JavaScript atau elemen HTML tambahan! Sebenarnya, ia lebih mudah sejak kebelakangan ini. Mari kita lihat.

Kesan akhir adalah seperti berikut:

Perkara lebih mudah daripada sebelumnya!

Sebabnya kita akhirnya boleh<input> ::before dan ::after unsur-unsur pseudo tag itu sendiri digayakan. Ini bermaksud kita boleh menyimpan dan menetapkan<input> gaya tanpa unsur tambahan. Sebelum ini, kita terpaksa bergantung pada tambahan<div> atau<code><span></span> Untuk melaksanakan reka bentuk tersuai.

Mari lihat kod HTML

Tidak ada yang istimewa di sini. Kami hanya perlu menggunakan kod HTML ini untuk gaya input:

<input type="checkbox" id="c1">
<input type="radio" id="r1">
<input type="checkbox" id="s1">

Ini semua mengenai bahagian HTML. Sudah tentu, disyorkan untuk menambah name dan atribut id , serta yang sepadan<label></label> elemen:

 <label for="c1">Kotak periksa</label>
<input type="checkbox" id="c1">

<label for="r1">Butang radio</label>
<input type="radio" id="r1">

<label for="s1">suis</label>
<input type="checkbox" id="s1" class="switch">

Mula Menetapkan Gaya

Pertama, kami menyemak sokongan untuk appearance: none; termasuk versi awalannya. Atribut appearance adalah kunci kerana ia direka untuk mengeluarkan gaya lalai penyemak imbas dari elemen. Jika penyemak imbas tidak menyokong harta ini, gaya tidak akan digunakan dan gaya input lalai akan dipaparkan. Ini benar -benar baik dan juga merupakan contoh yang baik dari peningkatan secara beransur -ansur.

 @Supports (-WebKit-appearance: none) atau (-moz-appearance: none) {
  input [type = 'ceckbox'],
  input [type = 'radio'] {
    -Webkit-appearing: Tiada;
    -Moz-Penampilan: Tiada;
  }
}

Buat masa ini, appearance masih dalam fasa draf kerja, tetapi inilah sokongan:

Penyemak imbas ini menyokong data dari CANIUSE, yang mengandungi lebih banyak maklumat. Nombor menunjukkan bahawa penyemak imbas menyokong ciri ini dalam versi ini dan kemudian.

Desktop

Mudah alih/tablet

Seperti pautan, kita perlu mempertimbangkan keadaan interaksi yang berbeza dari elemen bentuk. Kami menganggap negeri -negeri ini apabila menetapkan gaya elemen:

• :checked
• :hover
• :focus
• :disabled

Sebagai contoh, inilah cara untuk menggayakan input togol kami, membuat tombol, dan pertimbangkan :checked :

 /* Menukar bekas*/
.switch {
  lebar: 38px;
  Sempadan-radius: 11px;
}

/* Tukar tombol*/
.switch :: selepas {
  Kiri: 2px;
  Atas: 2px;
  Radius sempadan: 50%;
  lebar: 15px;
  Ketinggian: 15px;
  latar belakang: var (-ab, var (-sempadan));
  Transform: TranslateX (var (-x, 0));
}

/* Tukar warna dan kedudukan apabila dipilih*/
.Switch: diperiksa {
  --ab: var (-aktif-inner);
  --x: 17px;
}

/* Kurangkan kelegapan tombol togol apabila input dilumpuhkan*/
.Switch: dilumpuhkan: tidak (: diperiksa) :: selepas {
  Opacity: .6;
}

Kami akan<input> Unsur -unsur digunakan sebagai bekas. Tombol di dalam input dicipta dengan ::after Pseudo-Element. Sekali lagi, tiada penanda tambahan diperlukan!

Jika anda membuka gaya dalam demo, anda akan melihat bahawa kami menentukan beberapa sifat tersuai CSS, kerana ini telah menjadi cara yang baik untuk menguruskan nilai yang boleh diguna semula dalam lembaran gaya:

 @Supports (-WebKit-appearance: none) atau (-moz-appearance: none) {
  input [type = 'ceckbox'],
  input [type = 'radio'] {
    --aktif: #275efe;
    -aktif-inner: #fff;
    -fokus: 2px RGBA (39, 94, 254, .25);
    --border: #bbc1e1;
    -Border-hover: #275efe;
    -background: #fff;
    --Disabled: #f6f8ff;
    --disabled-inner: #e1e6f9;
  }
}

Tetapi ada sebab lain kami menggunakan sifat tersuai - mereka sangat sesuai untuk mengemas kini nilai berdasarkan keadaan elemen! Kami tidak akan pergi ke butiran di sini, tetapi berikut adalah contoh cara menggunakan sifat tersuai berdasarkan keadaan yang berbeza.

 /* nilai lalai*/
input [type = 'ceckbox'],
input [type = 'radio'] {
  --aktif: #275efe;
  --border: #bbc1e1;
  sempadan: 1px pepejal var (-bc, var (-sempadan));
}

/* Menulis semula nilai lalai*/
input [type = 'ceckbox']: diperiksa,
input [type = 'radio']: diperiksa {
  --b: var (-aktif);
  --bc: var (-aktif);
}

/* Jika tidak dipilih dan tidak dilumpuhkan, warna sempadan lain digunakan semasa melayang*/
input [type = 'ceckbox']: tidak (: diperiksa): tidak (: dilumpuhkan): hover,
input [type = 'radio']: tidak (: diperiksa): tidak (: dilumpuhkan): hover {
  --bc: var (-sempadan-hover);
}

Untuk aksesibiliti kita harus menambah gaya fokus tersuai. Kami mengeluarkan garis lalai kerana ia tidak boleh dibulatkan seperti gaya yang kami tetapkan. Walau bagaimanapun, box-shadow dengan sudut bulat boleh mencipta gaya sudut bulat yang berfungsi seperti garis besar.

 input [type = 'ceckbox'],
input [type = 'radio'] {
  -fokus: 2px RGBA (39, 94, 254, .25);
  Garis besar: Tiada;
  Peralihan: Box-shadow .2s;
}

input [type = 'ceckbox']: fokus,
input [type = 'radio']: fokus {
  box-shadow: 0 0 0 var (-fokus);
}

Anda juga boleh menyelaraskan dan menetapkan terus ke HTML<input> Elemental<label></label> Gaya Elemen:

 <label for="c1">Kotak periksa</label>
<input type="checkbox" id="c1">

Input [Type = 'Checkbox'] label,
Input [type = 'radio'] label {
  paparan: blok sebaris;
  Vertical-Align: Top;
  /* Gaya lain*/
}

Input [Type = 'Checkbox']: Label dilumpuhkan,
input [type = 'radio']: label dilumpuhkan {
  kursor: tidak diberi makan;
}

Tunjukkan demo lagi:

Mudah -mudahan anda dapat melihat betapa mudahnya untuk membuat gaya bentuk tersuai hari ini. Ia memerlukan lebih sedikit markup kerana elemen pseudo secara langsung pada input bentuk. Ia memerlukan suis gaya yang lebih sedikit kerana sifat tersuai. Dan terima kasih kepada @supports ia mempunyai sokongan penyemak imbas yang cukup baik.

Semua dalam semua, ini jauh lebih baik daripada pengalaman pembangunan yang kita hadapi pada masa lalu!