<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