Introduction à la méthode d'implémentation de styles personnalisés de boutons radio HTML

Préface :

Un jour, alors que j'écrivais une interface avec des boutons radio, je me suis soudain souvenu des différents boutons radio d'autres sites Web sur Internet, et j'ai pensé : « Et si je changeais ce cercle ? J'ai cherché le style du bouton radio, mais aucun d'eux n'a dit que c'était pour modifier le cercle, alors je suis allé sur Internet pour le retrouver. Il y en avait différents types, j'en ai choisi un et je l'ai légèrement modifié. Cela semblait simple et facile à comprendre, et le plus important est que l'effet soit bon, alors j'aimerais le partager avec vous ici.

Principe :
Comme mentionné précédemment, le bouton radio html ne fournit pas de style pour modifier son cercle, il est donc impossible de se fier uniquement à une instruction du type "color:#fff" , mais considérez :
(A) Chaque entrée en html peut ajouter une étiquette. Cliquer sur l'étiquette déclenchera également le clic sur l'entrée :

　

<.>

Avez-vous soudainement réalisé après avoir vu cela que l'icône du bouton radio personnalisé sert simplement à masquer le bouton radio, puis à modifier l'image d'arrière-plan de l'étiquette à chaque clic pour obtenir un effet personnalisé, et elle doit être modifiée plus tard, les icônes des boutons radio sont remplacées par des fleurs, des chats et des chiens, ce qui n'est qu'un changement d'images. S'il ne peut toujours pas être mis en œuvre, passons à en discuter en détail :

Mise en œuvre :

Les quatre points mentionnés dans le principe peuvent également être considérés comme les quatre étapes de la mise en œuvre de la personnalisation Boutons radio :

R : Il n'y a pas grand chose à dire, utilisez simplement des balises.

<label>
    <input>
    男</label>

B :

设置背景：	background: url(http://images.cnblogs.com/cnblogs_com/fly-show/907124/o_radio_bk.png) no-repeat;
设置背景大小：	background-size：20px 40px;       (这里我的背景图是两个图标上下接在一起的，故高度为背景的两倍)
设置显示方式：	display: inline-block;　　　　（设置label为行内块元素，让它能有宽高，而且不换行）
设置高度和行高：	height: 20px;line-height: 20px;
设置文字靠右一点：	text-indent:20px;

C : Masquer le bouton radio ： display:none;

　 D : J'utilise

JQuery dans cette étape, principalement pour plus de commodité. Tout d'abord, une classe du CSS sélectionné est définie, et une méthode est ajoutée à tous les boutons radio lorsque vous cliquez dessus : recherchez les étiquettes de tous les boutons radio portant le même nom, puis supprimez leurs styles sélectionnés, puis. ajoutez-vous un style sélectionné.

Style sélectionné :

.checked {    background-position: 0  -20px;
}

Ici, j'ai utilisé la position d'arrière-plan pour incliner l'image d'arrière-plan vers le haut Déplacer 20px pour afficher l’image sélectionnée.

Ajouter une méthode de traitement des clics :

$("input[type='radio']").click("input[type='radio'][name='"+$().attr('name')+"']").parent().removeClass("checked").parent().addClass("checked"

Enfin :

Si vous souhaitez modifier d'autres balises, ou donner autres balises (Par exemple : zone de sélection multiple) Ajoutez du style, vous pouvez également essayer cette méthode.

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!