interface Web
tutoriel CSS
Explication graphique et textuelle détaillée de l'embellissement du style de sélection unique et de sélection de chèques
Explication graphique et textuelle détaillée de l'embellissement du style de sélection unique et de sélection de chèques
Cette fois, je vais vous apporter une explication détaillée en image et en texte de l'embellissement des styles à sélection unique et à sélection multiple NotesIl y a lesquels, voici des cas pratiques, jetons-y un coup d'œil.
Avant-propos
Je crois que tout le monde sait que dans les éléments de formulaire, bouton radio et bouton à cocher Les deux ont États sélectionnés et non sélectionnés. Il est difficile de remplacer les styles par défaut de ces deux boutons. En CSS3, nous pouvons implémenter des styles personnalisés via le sélecteur de statut ":checked" et d'autres balises. En utilisant CSS3, nous pouvons créer un formulaire utilisateur très personnalisé. L'effet obtenu dans cet article est très bon. Les amis intéressés peuvent venir apprendre ensemble.
Le rendu est le suivant
Exemple de code
<!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>Remarque :
+ est le sélecteur adjacent de CSS.
Il n'y a que quatre sélecteurs de relation, qui sont des espaces > + ~ (y compris les sélecteurs, les sous-sélecteurs, les sélecteurs adjacents et les sélecteurs frères)
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Implémentation CSS de la barre de navigation de premier niveau
Explication détaillée de l'utilisation du dégradé linéaire
Malentendus courants dans l'utilisation du CSS et du HTML
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
macOS : Comment changer la couleur des widgets du bureau
Oct 07, 2023 am 08:17 AM
Dans macOS Sonoma, les widgets n'ont pas besoin d'être masqués hors écran ou oubliés dans le panneau du Centre de notifications comme c'était le cas dans les versions précédentes de macOS d'Apple. Au lieu de cela, ils peuvent être placés directement sur le bureau de votre Mac – ils sont également interactifs. Lorsqu'ils ne sont pas utilisés, les widgets du bureau macOS s'effacent en arrière-plan dans un style monochrome, réduisant ainsi les distractions et vous permettant de vous concentrer sur la tâche à accomplir dans l'application ou la fenêtre active. Cependant, lorsque vous cliquez sur le bureau, ils reviennent en couleur. Si vous préférez un aspect terne et souhaitez conserver cet aspect d'uniformité sur votre bureau, il existe un moyen de le rendre permanent. Les étapes suivantes montrent comment procéder. Ouvrez l'application Paramètres système
Guide pour résoudre le désalignement des pages Web WordPress
Mar 05, 2024 pm 01:12 PM
Guide pour résoudre les pages Web WordPress mal alignées Dans le développement de sites Web WordPress, nous rencontrons parfois des éléments de page Web mal alignés. Cela peut être dû à des tailles d'écran sur différents appareils, à la compatibilité du navigateur ou à des paramètres de style CSS inappropriés. Pour résoudre ce désalignement, nous devons analyser soigneusement le problème, trouver les causes possibles, puis le déboguer et le réparer étape par étape. Cet article partagera certains problèmes courants de désalignement des pages Web WordPress et les solutions correspondantes, et fournira des exemples de code spécifiques pour aider à développer
Utilisez ThinkPHP6 pour implémenter une belle page 404
Jun 20, 2023 am 11:06 AM
À mesure qu’Internet se développe, de nombreux sites Web ou applications sont progressivement devenus plus complexes. Lorsque les utilisateurs l’utilisent, ils rencontrent souvent des pages d’erreur, dont la plus courante est la page 404. La page 404 signifie que la page consultée n’existe pas et constitue une page d’erreur courante. Pour les sites Web ou les applications, une belle page 404 peut grandement améliorer l’expérience utilisateur. Dans cet article, nous présenterons comment utiliser ThinkPHP6 pour implémenter rapidement une belle page 404. Créer une route Tout d'abord, nous devons créer une erreur dans le dossier route
Conception d'image d'arrière-plan Web CSS : créez différents styles et effets d'image d'arrière-plan
Nov 18, 2023 am 08:38 AM
Conception d'image d'arrière-plan de page Web CSS : créez divers styles et effets d'image d'arrière-plan, des exemples de code spécifiques sont requis. Résumé : Dans la conception Web, les images d'arrière-plan sont un élément visuel important, qui peut améliorer efficacement l'attractivité et la lisibilité de la page. Cet article présentera certains styles et effets courants de conception d’image d’arrière-plan CSS, et fournira des exemples de code correspondants. Les lecteurs peuvent sélectionner et appliquer ces styles et effets d'image d'arrière-plan en fonction de leurs propres besoins et préférences pour obtenir de meilleurs effets visuels et une meilleure expérience utilisateur. Mots-clés : CSS, image d'arrière-plan, style de conception, effet, représentation du code
Embellissez votre interface utilisateur avec les nouvelles feuilles de style CSS JavaFX dans Java 13
Jul 30, 2023 pm 02:49 PM
Utilisez la nouvelle feuille de style JavaFXCSS dans Java13 pour embellir l'interface utilisateur Introduction : Dans le développement de logiciels, la beauté et la facilité d'utilisation de l'interface utilisateur sont cruciales pour améliorer l'expérience utilisateur. JavaFX est une technologie d'interface moderne et expressive sur la plate-forme Java qui fournit des composants et des fonctions d'interface utilisateur riches. Afin de rendre l'interface utilisateur plus belle, JavaFX fournit des feuilles de style CSS pour embellir et personnaliser l'interface. Dans Java13, JavaFX a introduit de nouvelles feuilles de style CSS,
Comment embellir un mot
Mar 19, 2024 pm 08:31 PM
Lorsque nous éditons des documents Word, nous espérons toujours rendre les documents plus beaux et plus beaux. Cependant, lorsqu'il s'agit d'embellissement des mots, de nombreuses personnes pensent à personnaliser les polices et les couleurs et à ajuster les marges et l'espacement des lignes. En fait, nous pouvons rendre les mots plus beaux grâce à plus d'opérations. Par exemple, nous pouvons rendre les documents Word plus beaux en insérant des images, en modifiant les bordures, etc. Nous essaierons ensuite d'utiliser des motifs de bordure pour rendre les documents Word plus beaux, apprenons ensemble ! Tout d'abord, ouvrez un nouveau document Word, puis recherchez l'outil [Paragraphe] sous l'onglet [Accueil]. Ensuite, cliquez sur l'option [Bordure], comme indiqué par la flèche rouge dans l'image. 2. Après avoir cliqué, le système affichera automatiquement une sélection déroulante
Utilisez le sélecteur de pseudo-classe :nth-last-child(2) pour sélectionner le style de l'avant-dernier élément enfant
Nov 20, 2023 am 11:22 AM
Utilisez le sélecteur de pseudo-classe :nth-last-child(2) pour sélectionner le style de l'avant-dernier élément enfant. Des exemples de code spécifiques sont requis. En CSS, le sélecteur de pseudo-classe est un outil très puissant qui peut être utilisé pour sélectionner. l'arborescence du document. L'un d'eux est le sélecteur de pseudo-classe :nth-last-child(2), qui sélectionne l'avant-dernier élément enfant et lui applique des styles. Tout d’abord, créons un exemple de document HTML afin de pouvoir y utiliser ce sélecteur de pseudo-classe. par
Utilisez le sélecteur de pseudo-classe :root pour sélectionner le style de l'élément racine du document
Nov 20, 2023 pm 02:18 PM
Utiliser le sélecteur de pseudo-classe :root pour sélectionner le style de l'élément racine du document nécessite des exemples de code spécifiques. En CSS, nous pouvons utiliser le sélecteur de pseudo-classe :root pour sélectionner l'élément racine du document et spécifier un style spécifique. pour ça. Le sélecteur de pseudo-classe :root équivaut à la sélection d'éléments HTML dans la plupart des cas, mais lorsqu'un espace de noms existe dans le document, le sélecteur de pseudo-classe :root sélectionnera l'élément racine de l'espace de noms par défaut. Voici un exemple de code concret qui montre comment utiliser le sélecteur de pseudo-classe :root pour sélectionner l'élément racine du document.
