Programación > Programación Web

[HTML][CSS] Aplicar CSS a un input de tipo range. -- .:Xx4NG3LxX:.

(1/1)

.:Xx4NG3LxX:.:
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 ...

Navegación

[0] Índice de Mensajes