<input type="range" problema en -webkit-appearance:

Zipus · #1 (**permalink**) 03/04/2011, 02:40

Antes de nada, gracias por sus aportaciones. Tengo esto:

Código PHP:

 
<html> 
<head> 
  
<style type="text/css"> 
.rangeH {width: 140px; height: 60px; margin: 0; padding: 0; border: 0; 
         background-image: url("colores2.jpg"); 
         -webkit-appearance: none; background-repeat: no-repeat;} 
.rangeH::-webkit-slider-thumb, {-webkit-appearance: none; 
         width: 11px; height: 11px; 
         background-image: url("/rangeThumb.png")} 
 
.rangeH:focus, .rangeV:focus {outline: 1px solid #28f;} 
</style> 
 
<meta http-equiv="refresh" content="1"> 
<meta http-equiv="Cache-Control" content="no-cache" /> 
</head> 
 
<body> 
<input type="range" class="rangeH" name="hs" min="0" max="100" value="<?php include("value.txt"); ?>" onChange="fn3(hs.value)"> 
</body> 
</html>

El problema viene cuando intento cambiar el range a vertical, me parece que lo hago bien pero no se me muestra la imagen de fondo (es muy importante para mi proyecto)

Código PHP:

 
<html> 
<head> 
  
<style type="text/css"> 
.rangeH {width: 60px; height: 140px; margin: 0; padding: 0; border: 0; 
         background-image: url("colores3.jpg"); 
         -webkit-appearance: slider-vertical;  background-repeat: no-repeat;} 
.rangeH::-webkit-slider-thumb, {-webkit-appearance: slider-vertical;  
         width: 11px; height: 11px; 
         background-image: url("/rangeThumb.png")} 
 
.rangeH:focus, .rangeV:focus {outline: 1px solid #28f;} 
</style> 
 
<meta http-equiv="refresh" content="1"> 
<meta http-equiv="Cache-Control" content="no-cache" /> 
</head> 
 
<body> 
<input type="range" class="rangeH" name="hs" min="0" max="100" value="<?php include("value.txt"); ?>" onChange="fn3(hs.value)"> 
</body> 
</html>

-------------------------------------------------------------------------------------------------

pateketrueke · #2 (**permalink**) 03/04/2011, 10:25

a todo esto, ¿cual es el problema de código php?

porque por lo que mencionas, tu problema es exclusivo de HTML y CSS... y vamos, ¿ya te diste cuenta, verdad?

GatorV · #3 (**permalink**) 03/04/2011, 12:08

Tema movido desde PHP a HTML

Zipus · #4 (**permalink**) 03/04/2011, 12:31

El problema es que en el primer codigo (range horizontal) me muestra el backgrund-image, pero en el segundo (range vertical) no me muestra la imagen.

kseso? · #5 (**permalink**) 03/04/2011, 13:31

Cita:

.rangeH {
.rangeH::-webkit-slider-thumb, {

~~::-webkit-slider-thumb <-- No existe ningún pseudoelemento llamado así y al ser un sólo selector tampoco debería terminar con una coma (,)~~

Editado por erroneo.
ver más abajo

Zipus · #6 (**permalink**) 03/04/2011, 15:39

i como puedo hacer que se vea el fondo en un range vertical??

kseso? · #7 (**permalink**) 04/04/2011, 06:42

Bueno, con algo más de tiempo para buscar info al respecto (google no muerde ni hace esclavos) veo que es un "invento" css de webkit para los aipones

http://davidbcalhoun.com/2011/implem...put-type-range
https://lists.webkit.org/pipermail/w...ch/016140.html

Pero son varias las quejas por un bug en varios foros y listas