Inicio
Blog
Creandolared
Buscar
Ingresar
Registrarse
Hack x Crack - Comunidad de Seguridad informática
»
Programación
»
Programación Web
»
[HTML][CSS] Aplicar CSS a un input de tipo range. -- .:Xx4NG3LxX:.
¿Quieres aprender de páginas web? Visita la
comunidad Creandolared
Imprimir
Páginas: [
1
]
Ir Abajo
Autor
Tema: [HTML][CSS] Aplicar CSS a un input de tipo range. -- .:Xx4NG3LxX:. (Leído 433 veces)
.:Xx4NG3LxX:.
Hola que tal?
{ L0 } Ñuub
Mensajes: 39
Hola!!!
[HTML][CSS] Aplicar CSS a un input de tipo range. -- .:Xx4NG3LxX:.
«
en:
Septiembre 21, 2020, 03:31:53 am »
Saludos, ahora les mostrare de manera sencilla como aplicarle CSS a un input de tipo range...
Lo primero será crear nuestro elemento a modificar:
Código: Text
<input type="range" id="ran" />
Luego, a lo que vamos, el CSS (explicado con comentarios, cualquier duda decírmela):
Código: CSS
/* Estilos aplicados al input */
#ran
{
-webkit-appearance
:
none
;
appearance
:
none
;
/* Le quitamos la apariencia por defecto */
background
:
skyblue
;
/* Personalizable: color de fondo */
outline
:
none
;
/* Sin línea exterior */
padding
:
3px
;
/* Margen interno */
width
:
100%
;
/* Indicamos que ocupe el ancho total de la página. (Modifique lo a gusto) */
box-sizing
:
border-box
;
}
/* Estilos del slider del input */
#ran
:
:-webkit-slider-thumb
,
#ran
:
:-moz-slider-thumb
{
-webkit-appearance
:
none
;
appearance
:
none
;
/* Le quitamos la apariencia por defecto */
width
:
25px
;
/* Modificable: Ancho */
height
:
25px
;
/* Modificable: Alto */
background
:
#5c7dd8
;
/* Fondo del slider */
cursor
:
pointer
;
/* Cambiamos el tipo de cursor */
}
#ran
:
:-webkit-slider-thumb
:hover
,
#ran
:
:-moz-slider-thumb
:hover
{
/* Estilos al pasar el mouse por el slider */
background
:
#739cf9
;
/* Modificamos sólo el fondo */
}
Eso fue todo, espero les sirva en su/s páginas...
Cuídense ...
En línea
"No todo lo viejo es bueno, y no todo lo nuevo es malo."
Visita mi foro:
BatchPower
Imprimir
Páginas: [
1
]
Ir Arriba
Hack x Crack - Comunidad de Seguridad informática
»
Programación
»
Programación Web
»
[HTML][CSS] Aplicar CSS a un input de tipo range. -- .:Xx4NG3LxX:.
Va un mudo y le dice a un sordo: Hack x Crack usa cookies. Pues eso...
OK
Learn more