Maison >interface Web >tutoriel HTML >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 :
<.>
<label> <input> 男</label>
设置背景: | 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; |
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; }
$("input[type='radio']").click("input[type='radio'][name='"+$().attr('name')+"']").parent().removeClass("checked").parent().addClass("checked"Enfin :
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!