¿Hay alguna manera de diseñar el control de rango de HTML5?

36

Resulta que existe en webkit:

input[type="range"]{ 
    -webkit-appearance:none !important; 
} 

input[type="range"]::-webkit-slider-thumb{ 
    -webkit-appearance:none !important; 
}

A continuación, puede añadir cualquier atributos que necesita cada uno esos selectores. Fondo, gradiente, etc ...

Espero que ayude!

Fuente

2010-06-10 20:04:09 majman

+1

Su justo ocultar el control de la gama. ¿Cómo estilizarlo? Quiero decir, ¿qué propiedades debemos establecer? – coure2011

+0

simplemente agregue algo como: altura: 20px; color de fondo: rojo; –

+0

Sí, es posible. Revise este enlace http://jsfiddle.net/jalbertbowdenii/7Nzgw/3/ – Teknotica

12

un ejemplo completo de css para la personalización (en este momento para webkit):

input[type="range"]{ 
    background: rgb(94, 30, 30); 
    width: 130px; 
    height: 6px; 
    -webkit-appearance: none; 
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
    -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
    box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
} 

input[type="range"]:hover{ 
    background: rgb(194, 139, 131); 
    width: 130px; 
    height: 6px; 
    -webkit-appearance: none; 
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
    -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
    box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
} 

input[type="range"]::-webkit-slider-thumb{ 
    -webkit-appearance:none !important; 
    width:25px; 
    height:15px; 
    -webkit-appearance: none; 
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    border:1px solid black; 

    background: #a90329; 
    background: -moz-linear-gradient(left, #a90329 0%, #8f0222 50%, #6d0019 100%); 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a90329), color-stop(50%,#8f0222), color-stop(100%,#6d0019)); 
    background: -webkit-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%); 
    background: -o-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%); 
    background: -ms-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%); 
    background: linear-gradient(to right, #a90329 0%,#8f0222 50%,#6d0019 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019',GradientType=1); 
} 

input[type="range"]::-webkit-slider-thumb:hover{ 
    -webkit-appearance:none !important; 
    width:25px; 
    height:15px; 
    -webkit-appearance: none; 
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    background-color:rgb(56, 13, 13); 
    border:1px solid black; 

    background: -moz-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%); 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d2e38), color-stop(50%,#2b4254), color-stop(100%,#2b4254)); 
    background: -webkit-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); 
    background: -o-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); 
    background: -ms-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); 
    background: linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1d2e38', endColorstr='#2b4254',GradientType=1); 
}

Fuente

2013-03-29 19:08:29 shakaran

+0

¿qué es -wekkit *? tienes esto en algunos lugares y no estoy seguro de si es intencional o accidental. – funkymushroom

+0

es un prefijo para los navegadores basados en el motor WebKit (proveedor de CSS) http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm – shakaran

+0

Estaba preguntando sobre "-wekkit" (tenga en cuenta el doble k) en algunas de las líneas anteriores, a diferencia del estándar "-webkit". Creo que es probablemente un error tipográfico. :) – funkymushroom

1

En la parte superior respuesta del su ya descritos. Solo lo personalizo en mi camino. Eche un vistazo, puede ayudarlo.

Añadir a continuación el código CSS:

input:focus{ 
    outline-color: transparent; 
} 
input[type="range"]{ 
    -webkit-appearance:none; 
    -moz-apperance:none; 
    height: 6px; 
    background-color: #b6b6b6; 
    outline-color: transparent; 
} 
input::-webkit-slider-thumb{ 
    -webkit-appearance:none; 
    -moz-apperance:none; 
    width:16px; 
    height:16px; 
    -webkit-border-radius:10px; 
    -moz-border-radius:10px; 
    -ms-border-radius:10px; 
    -o-border-radius:10px; 
    border-radius:10px; 
    background-color: #20b373; 
    overflow: visible; 
}

Live Demo

Fuente

2017-03-22 01:09:17

¿Hay alguna manera de diseñar el control de rango de HTML5?

Respuesta

Cuestiones relacionadas