单选、复选样式美化的图文详解
这次给大家带来单选、复选样式美化的图文详解，单选、复选样式美化的注意事项有哪些，下面就是实战案例，一起来看一下。
前言
相信大家都知道在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。要覆写这两个按钮默认样式比较困难。在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。利用CSS3我们可以打造非常具有个性化的用户表单，本文中实现的效果非常不错，感兴趣的朋友们下面来一起学习学习。
效果图如下
实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复选单选样式</title>
<link rel="stylesheet" href="style.css">
</head>
<style>
form {
border: 1px solid #ccc;
padding: 20px;
width: 300px;
}
.wrapper {
margin-bottom: 10px;
}
/*复选框*/
.checkbox-box {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 10px;
position: relative;
border: 2px solid orange;
vertical-align: middle;
}
.checkbox-box input {
opacity: 0;
position: absolute;
top:0;
left:0;
z-index:10;
}
.checkbox-box span {
position: absolute;
top: -10px;
right: 3px;
font-size: 30px;
font-weight: bold;
font-family: Arial;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
color: orange;
}
.checkbox-box input[type="checkbox"] + span {
opacity:0;
}
.checkbox-box input[type="checkbox"]:checked + span {
opacity: 1;
}
/*单选框*/
.redio-box {
display: inline-block;
width: 30px;
height: 30px;
margin-right: 10px;
position: relative;
background: orange;
vertical-align: middle;
border-radius: 100%;
}
.redio-box input {
opacity: 0;
position: absolute;
top:0;
left:0;
width: 100%;
height:100%;
z-index:100;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/
}
.redio-box span {
display: block;
width: 10px;
height: 10px;
border-radius: 100%;
position: absolute;
background: #fff;
top: 50%;
left:50%;
margin: -5px 0 0 -5px;
z-index:1;
}
.redio-box input[type="radio"] + span {
opacity: 0;
}
.redio-box input[type="radio"]:checked + span {
opacity: 1;
}
</style>
<body>
<h2>复选框：</h2>
<form action="#">
<p class="wrapper">
<p class="checkbox-box">
<input name="1" type="checkbox" checked id="usename" />
<span>√</span>
</p>
<label for="usename">体育</label>
</p>
<p class="wrapper">
<p class="checkbox-box">
<input name="1" type="checkbox" id="usepwd" />
<span>√</span>
</p>
<label for="usepwd">音乐</label>
</p>
<p class="wrapper">
<p class="checkbox-box">
<input name="1" type="checkbox" id="checkbox3" />
<span>√</span>
</p>
<label for="checkbox3">读书</label>
</p>
<p class="wrapper">
<p class="checkbox-box">
<input name="1" type="checkbox" id="checkbox4" />
<span>√</span>
</p>
<label for="checkbox4">运动</label>
</p>
</form>
<h2>单选框</h2>
<form action="#">
<p class="wrapper">
<p class="redio-box">
<input type="radio" checked="checked" id="boy" name="1" /><span></span>
</p>
<label for="boy">男</label>
</p>
<p class="wrapper">
<p class="redio-box">
<input type="radio" id="girl" name="1" /><span></span>
</p>
<label for="girl">女</label>
</p>
</form>
</body>
</html>注意：
+ 是css的相邻选择符。
关系选择符只有四种,是 空格 > + ~ （包含选择符、子选择符、相邻选择符、兄弟选择符）
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci 单选、复选样式美化的图文详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1386
52
macOS: Cara menukar warna widget desktop
Oct 07, 2023 am 08:17 AM
Dalam macOS Sonoma, widget tidak perlu disembunyikan di luar skrin atau dilupakan dalam panel Pusat Pemberitahuan seperti yang dilakukan dalam versi sebelumnya macOS Apple. Sebaliknya, ia boleh diletakkan terus pada desktop Mac anda - ia juga interaktif. Apabila tidak digunakan, widget desktop macOS memudar ke latar belakang dalam gaya monokrom, mengurangkan gangguan dan membolehkan anda menumpukan pada tugas yang sedang dijalankan dalam aplikasi atau tetingkap aktif. Walau bagaimanapun, apabila anda mengklik pada desktop, ia kembali kepada warna penuh. Jika anda lebih suka rupa yang menjemukan dan ingin mengekalkan aspek keseragaman itu pada desktop anda, ada cara untuk menjadikannya kekal. Langkah-langkah berikut menunjukkan cara ia dilakukan. Buka apl Tetapan Sistem
Panduan untuk menyelesaikan salah jajaran halaman web WordPress
Mar 05, 2024 pm 01:12 PM
Panduan untuk menyelesaikan halaman web WordPress yang tidak sejajar Dalam pembangunan tapak web WordPress, kadangkala kami menghadapi elemen halaman web yang tidak sejajar Ini mungkin disebabkan oleh saiz skrin pada peranti yang berbeza, keserasian penyemak imbas atau tetapan gaya CSS yang tidak betul. Untuk menyelesaikan salah jajaran ini, kita perlu menganalisis masalah dengan teliti, mencari kemungkinan punca dan nyahpepijat serta membaikinya langkah demi langkah. Artikel ini akan berkongsi beberapa masalah salah jajaran laman web WordPress biasa dan penyelesaian yang sepadan, dan memberikan contoh kod khusus untuk membantu membangunkan
Gunakan ThinkPHP6 untuk melaksanakan halaman 404 yang cantik
Jun 20, 2023 am 11:06 AM
Apabila Internet berkembang, banyak laman web atau aplikasi secara beransur-ansur menjadi lebih kompleks. Apabila pengguna menggunakannya, mereka sering menghadapi halaman ralat, yang paling biasa ialah halaman 404. Halaman 404 bermakna halaman yang diakses tidak wujud dan merupakan halaman ralat biasa. Untuk tapak web atau aplikasi, halaman 404 yang cantik boleh meningkatkan pengalaman pengguna dengan ketara. Dalam artikel ini, kami akan memperkenalkan cara menggunakan ThinkPHP6 untuk melaksanakan halaman 404 yang cantik dengan cepat. Cipta laluan Pertama, kita perlu mencipta ralat dalam folder laluan
Reka bentuk imej latar belakang web CSS: mencipta pelbagai gaya dan kesan imej latar belakang
Nov 18, 2023 am 08:38 AM
Reka bentuk imej latar belakang halaman web CSS: Cipta pelbagai gaya dan kesan imej latar belakang, contoh kod khusus diperlukan Ringkasan: Dalam reka bentuk web, imej latar belakang ialah elemen visual yang penting, yang boleh meningkatkan daya tarikan dan kebolehbacaan halaman dengan berkesan. Artikel ini akan memperkenalkan beberapa gaya reka bentuk imej latar belakang CSS biasa dan kesan, dan memberikan contoh kod yang sepadan. Pembaca boleh memilih dan menggunakan gaya dan kesan imej latar belakang ini mengikut keperluan dan keutamaan mereka sendiri untuk mencapai kesan visual dan pengalaman pengguna yang lebih baik. Kata kunci: CSS, imej latar belakang, gaya reka bentuk, kesan, perwakilan kod
Cantikkan antara muka pengguna anda dengan helaian gaya CSS JavaFX baharu dalam Java 13
Jul 30, 2023 pm 02:49 PM
Gunakan helaian gaya JavaFXCSS baharu dalam Java13 untuk mencantikkan antara muka pengguna Pengenalan: Dalam pembangunan perisian, keindahan dan kemudahan penggunaan antara muka pengguna adalah penting untuk meningkatkan pengalaman pengguna. JavaFX ialah teknologi antara muka moden dan ekspresif pada platform Java yang menyediakan komponen dan fungsi UI yang kaya. Untuk menjadikan antara muka pengguna lebih cantik, JavaFX menyediakan helaian gaya CSS untuk mencantikkan dan menyesuaikan antara muka. Dalam Java13, JavaFX memperkenalkan helaian gaya CSS baharu,
Bagaimana untuk mencantikkan perkataan
Mar 19, 2024 pm 08:31 PM
Apabila kami mengedit dokumen perkataan, kami sentiasa berharap untuk menjadikan dokumen lebih cantik dan cantik Namun, apabila bercakap tentang pengindahan perkataan, ramai orang berfikir untuk menjadikan fon dan warna lebih diperibadikan, dan melaraskan margin dan jarak baris hakikatnya, kita boleh menjadikan perkataan lebih cantik melalui lebih banyak operasi Contohnya, kita boleh menjadikan dokumen perkataan lebih cantik dengan memasukkan gambar, mengubah suai sempadan, dsb. Seterusnya kita akan cuba menggunakan corak sempadan untuk menjadikan dokumen perkataan lebih cantik, mari belajar bersama! Mula-mula, buka dokumen Word baharu, dan kemudian cari alat [Perenggan] di bawah tab [Rumah]. Seterusnya, klik pilihan [Sempadan], seperti yang ditunjukkan oleh anak panah merah dalam imej. 2. Selepas kita klik, sistem akan secara automatik pop up pilihan drop-down
Gunakan pemilih kelas pseudo :nth-last-child(2) untuk memilih gaya elemen anak kedua hingga terakhir
Nov 20, 2023 am 11:22 AM
Gunakan pemilih kelas pseudo :nth-last-child(2) untuk memilih gaya elemen anak kedua. Contoh kod khusus diperlukan Dalam CSS, pemilih kelas pseudo ialah alat yang sangat berkuasa yang boleh digunakan untuk memilih pokok dokumen. Salah satunya ialah pemilih kelas pseudo :nth-last-child(2), yang memilih elemen anak kedua hingga terakhir dan menggunakan gaya padanya. Mula-mula, mari kita buat contoh dokumen HTML supaya kita boleh menggunakan pemilih kelas pseudo ini di dalamnya. oleh
Gunakan pemilih :root pseudo-class untuk memilih gaya elemen akar dokumen
Nov 20, 2023 pm 02:18 PM
Menggunakan :root pseudo-class pemilih untuk memilih gaya elemen akar dokumen memerlukan contoh kod khusus Dalam CSS, kita boleh menggunakan :root pseudo-class pemilih untuk memilih elemen akar dokumen dan menentukan gaya tertentu. untuk itu. Pemilih kelas pseudo :root adalah bersamaan dengan memilih elemen html dalam kebanyakan kes, tetapi apabila ruang nama wujud dalam dokumen, pemilih kelas pseudo:root akan memilih elemen akar ruang nama lalai. Berikut ialah contoh kod konkrit yang menunjukkan cara menggunakan :root pseudo-class pemilih untuk memilih elemen akar dokumen.
