Inicio
Buscar
Ingresar
Registrarse
Starfield: el juego que revolucionará el espacio y la tecnología
Hack x Crack - Comunidad de Seguridad informática
»
Programación
»
Programación Web
»
Personalizar checkboxes con CSS
Imprimir
Páginas: [
1
]
Ir Abajo
Autor
Tema: Personalizar checkboxes con CSS (Leído 5979 veces)
R3LI4NT
{ L4 } Geek
Mensajes: 390
El poder del usuario radica en su ANONIMATO.
Personalizar checkboxes con CSS
«
en:
Septiembre 08, 2021, 03:06:42 am »
Personalizar checkboxes con
CSS
Código HTML:
Código: Text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkboxes</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<label>
<input type="checkbox">
<span class="btn"></span>
<i class="fa fa-power-off icon"></i>
</label>
<label>
<input type="checkbox">
<span class="btn"></span>
<i class="fab fa-bluetooth-b icon"></i>
</label>
<label>
<input type="checkbox">
<span class="btn"></span>
<i class="fas fa-plane icon"></i>
</label>
<label>
<input type="checkbox">
<span class="btn"></span>
<i class="fas fa-bell icon"></i>
</label>
<label>
<input type="checkbox">
<span class="btn"></span>
<i class="fas fa-battery-full icon"></i>
</label>
<label>
<input type="checkbox">
<span class="btn"></span>
<i class="fas fa-wifi icon"></i>
</label>
</body>
</html>
Código CSS:
Código: CSS
*
{
padding
:
0
;
margin
:
0
;
box-sizing
:
border-box
;
}
body
{
height
:
100vh
;
width
:
100%
;
justify-content
:
center
;
align-items
:
center
;
display
:
grid
;
grid-template-columns
:
repeat
(
3
,
8em
)
;
background
:
#242526
;
}
label
{
position
:
relative
;
width
:
80px
;
height
:
80px
;
cursor
:
pointer
;
border-radius
:
50%
;
margin
:
0
20px
;
}
label
.btn
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
box-shadow
:
0
2px
4px
rgba
(
0
,
0
,
0
,
1
)
,
inset
0
-1px
6px
rgba
(
0
,
0
,
0
,
1
)
,
inset
0
-1px
5px
rgba
(
255
,
255
,
255
,
.7
)
,
0
0
2px
2px
#000
,
0
0
2px
0px
#0F0F0F
;
border-radius
:
50%
;
background
:
#1A1A1A
;
}
label input
[
type
=
'checkbox'
]
{
-webkit-appearance
:
none
;
}
label input
[
type
=
'checkbox'
]
:
checked ~
.btn
{
box-shadow
:
0
0
0
rgba
(
0
,
0
,
0
,
1
)
,
inset
0
-1px
6px
rgba
(
0
,
0
,
0
,
1
)
,
inset
1px
1px
rgba
(
255
,
255
,
255
,
.1
)
,
0
0
0
2px
#000
,
0
0
0
3px
#0F0F0F
,
0
0
15px
8px
#00B9DE
;
font-size
:
10px
;
}
label input
[
type
=
'checkbox'
]
:
checked ~
.fa
{
color
:
#00B9DE
;
text-shadow
:
0
0
13px
#00B9DE
,
0
0
25px
#00B9DE
;
}
label input
[
type
=
'checkbox'
]
:
checked ~
.fab
{
color
:
#00B9DE
;
text-shadow
:
0
0
13px
#00B9DE
,
0
0
25px
#00B9DE
;
}
label input
[
type
=
'checkbox'
]
:
checked ~
.fas
{
color
:
#00B9DE
;
text-shadow
:
0
0
13px
#00B9DE
,
0
0
25px
#00B9DE
;
}
label
.icon
{
position
:
absolute
;
top
:
50%
;
left
:
50%
;
transform
:
translate
(
-50%
,
-50%
)
;
font-size
:
2.1em
;
}
label
.icon
{
position
:
absolute
;
top
:
50%
;
left
:
50%
;
transform
:
translate
(
-50%
,
-50%
)
;
font-size
:
2.2em
;
}
label
.fa-plane
{
font-size
:
1.9em
;
}
label
.fa-bell
{
font-size
:
1.9em
;
}
label
.fa-battery-full
{
font-size
:
1.9em
;
}
label
.fa-wifi
{
font-size
:
1.9em
;
}
El pseudo-clase ":checked" representa el radio (checkbox) al momento de ser presionado.
En línea
No contesto dudas por MP, si las tienes, las planteas en el foro.
Road To Hacking v3:
https://github.com/R3LI4NT/road-to-hacking
poseidon
Moderador
{ L4 } Geek
Mensajes: 357
Malware undetector!
Re:Personalizar checkboxes con CSS
«
Respuesta #1 en:
Septiembre 09, 2021, 08:05:23 pm »
Estan muy chulos, me entran ganas de dormir mirandolos ajaja
En línea
R3LI4NT
{ L4 } Geek
Mensajes: 390
El poder del usuario radica en su ANONIMATO.
Re:Personalizar checkboxes con CSS
«
Respuesta #2 en:
Septiembre 09, 2021, 08:37:12 pm »
Cita de: poseidon en Septiembre 09, 2021, 08:05:23 pm
Estan muy chulos, me entran ganas de dormir mirandolos ajaja
Ahí tenés el icono del avión para ponerte en "modo avión" jajaj. Están buenos para hacer un panel de control, quedaría chulo.
En línea
No contesto dudas por MP, si las tienes, las planteas en el foro.
Road To Hacking v3:
https://github.com/R3LI4NT/road-to-hacking
Imprimir
Páginas: [
1
]
Ir Arriba
Hack x Crack - Comunidad de Seguridad informática
»
Programación
»
Programación Web
»
Personalizar checkboxes con CSS
Va un mudo y le dice a un sordo: Hack x Crack usa cookies. Pues eso...
OK
Learn more