Autor Tema: [HTML][CSS] Aplicar CSS a un input de tipo range. -- .:Xx4NG3LxX:. (Leído 433 veces)

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