Maison > Article > interface Web > Exemple de personnalisation du style du bouton radio en HTML
Exemple de personnalisation du style du bouton radio en HTML
- 黄舟original
- 2017-10-26 10:22:512511parcourir
Exemple de personnalisation du style d'un bouton radio en HTML :
<!DOCTYPE html>
<html lang="en">
<head>
<!--单选框样式-->
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.choice{
position: relative;
}
.choice .radio{
position: relative;
display: inline-block;
font-weight: 400;
color: #0c4757;
padding-left: 25px;
cursor: pointer;
}
.choice .radio input{
position: absolute;
left: -9999px;
}
.choice .radio i{
display: block;
position: absolute;
top: 6px;
left: 0;
width: 15px;
height: 15px;
outline: 0;
border: 1px solid #666;
border-radius: 50%;
transition: border-color .3s;
-webkit-transition: border-color .3s;
}
.choice .radio input:checked+i{
border-color: #0c4757;
}
.choice .radio input+i:after{
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: red;
opacity: 0;
transition: opacity .1s;
-webkit-transition: opacity .1s;
}
.choice .radio input:checked+i:after{
opacity: 1;
}
</style>
</head>
<body>
<p class="choice">
<label class="radio">在校生<input type="radio" name="radio" value="1" checked><i></i></label>
<label class="radio">非在校生<input type="radio" value="2" name="radio"><i></i></label>
</p>
</body>
</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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Balise HTML soulignéeArticle suivant：Balise HTML soulignée