El simple botón de opción se puede personalizar usando HTML y CSS fácilmente. Usaremos algunas propiedades de CSS para crear un botón de opción personalizado. El pseudo-elemento :after y el atributo marcado se utilizan para establecer alguna propiedad CSS. El código completo se divide en dos secciones, la primera sección contiene el código HTML y la segunda sección contiene el código CSS para crear un botón de opción personalizado.
Código HTML: en esta sección, crearemos un botón de radio simple usando las etiquetas <label> y <input> .
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> How to Create Custom Radio Button using HTML and CSS? </title> </head> <body> <h1>GeeksforGeeks</h1> <h3> Create Custom Radio Button using HTML and CSS </h3> <div> <label class="radio"> <input type="radio"> Button <div class="circle"></div> </label> </div> </body> </html>
Código CSS: En esta sección, diseñaremos el botón de radio usando el pseudo elemento :after y el atributo marcado .
CSS
<style>
body {
text-align: center;
}
h1 {
color: green;
}
div {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: serif;
font-size: 3em;
display: flex;
align-items: center;
justify-content: center;
}
.radio {
font-size: 30px;
font-weight: 500;
display: inline-flex;
align-items: center;
color: black;
}
input {
display: none;
}
.circle {
position: relative;
height: 25px;
width: 25px;
border: 5px solid #3CE75B;
display: inline-block;
right: 125px;
border-radius: 50%;
}
.circle:after {
content: '';
height: 10px;
width: 10px;
display: block;
position: absolute;
background: #3CE75B;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
opacity: 0;
}
.radio input:checked~.circle:after {
opacity: 1;
}
</style>
Código completo: en esta sección, combinaremos el código de las dos secciones anteriores (HTML y CSS) para crear un botón de opción personalizado.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
How to Create Custom Radio
Button using HTML and CSS?
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
div {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: serif;
font-size: 3em;
display: flex;
align-items: center;
justify-content: center;
}
.radio {
font-size: 30px;
font-weight: 500;
display: inline-flex;
align-items: center;
color: black;
}
input {
display: none;
}
.circle {
position: relative;
height: 25px;
width: 25px;
border: 5px solid #3CE75B;
display: inline-block;
right: 125px;
border-radius: 50%;
}
.circle:after {
content: '';
height: 10px;
width: 10px;
display: block;
position: absolute;
background: #3CE75B;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
opacity: 0;
}
.radio input:checked~.circle:after {
opacity: 1;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
Create Custom Radio Button
using HTML and CSS
</h3>
<div>
<label class="radio">
<input type="radio"> Button
<div class="circle"></div>
</label>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por lakshgoel204 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA