1
Programación Web / [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:
Luego, a lo que vamos, el CSS (explicado con comentarios, cualquier duda decírmela):
Eso fue todo, espero les sirva en su/s páginas...
Cuídense ...
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 ...