• 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)

    Desconectado .:Xx4NG3LxX:.

    • Hola que tal?
    • { L0 } Ñuub
    • Mensajes: 39
    • Hola!!!
      • Ver Perfil
      • BatchPower
    [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
    1. <input type="range" id="ran" />

    Luego, a lo que vamos, el CSS (explicado con comentarios, cualquier duda decírmela):

    Código: CSS
    1. /* Estilos aplicados al input */
    2.  
    3. #ran {
    4.   -webkit-appearance: none;
    5.   appearance: none;     /* Le quitamos la apariencia por defecto */
    6.   background: skyblue;     /* Personalizable: color de fondo */
    7.   outline: none;     /* Sin línea exterior */
    8.   padding: 3px;     /* Margen interno */
    9.   width: 100%;     /* Indicamos que ocupe el ancho total de la página. (Modifique lo a gusto) */
    10.   box-sizing: border-box;
    11. }
    12.  
    13. /* Estilos del slider del input */
    14.  
    15. #ran::-webkit-slider-thumb, #ran::-moz-slider-thumb {
    16.   -webkit-appearance: none;
    17.   appearance: none;     /* Le quitamos la apariencia por defecto */
    18.   width: 25px;     /* Modificable: Ancho */
    19.   height: 25px;     /* Modificable: Alto */
    20.   background: #5c7dd8;     /* Fondo del slider */
    21.   cursor: pointer;     /* Cambiamos el tipo de cursor */
    22. }
    23.  
    24. #ran::-webkit-slider-thumb:hover, #ran::-moz-slider-thumb:hover {     /* Estilos al pasar el mouse por el slider */
    25.   background: #739cf9;  /* Modificamos sólo el fondo */
    26. }

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

    • SMF | SMF © 2013, Simple Machines
    • XHTML
    • RSS
    • WAP2
    Va un mudo y le dice a un sordo: Hack x Crack usa cookies. Pues eso... Learn more