Foros del Web » Creando para Internet » HTML »

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

Estas en el tema de <input type="range" problema en -webkit-appearance: en el foro de HTML en Foros del Web. 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" /> ...
  #1 (permalink)  
Antiguo 03/04/2011, 03:40
 
Fecha de Ingreso: junio-2010
Mensajes: 105
Antigüedad: 7 años, 5 meses
Puntos: 1
<input type="range" problema en -webkit-appearance:

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>
-------------------------------------------------------------------------------------------------
  #2 (permalink)  
Antiguo 03/04/2011, 11:25
Avatar de pateketrueke
Modernizr
 
Fecha de Ingreso: abril-2008
Ubicación: Mexihco-Tenochtitlan
Mensajes: 26.399
Antigüedad: 9 años, 8 meses
Puntos: 2526
Respuesta: <input type="range" problema en -webkit-appearance:

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?
__________________
Y U NO RTFM? щ(ºдºщ)

No atiendo por MP nada que no sea personal.
  #3 (permalink)  
Antiguo 03/04/2011, 13:08
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 11 años, 6 meses
Puntos: 2122
Tema movido desde PHP a HTML
  #4 (permalink)  
Antiguo 03/04/2011, 13:31
 
Fecha de Ingreso: junio-2010
Mensajes: 105
Antigüedad: 7 años, 5 meses
Puntos: 1
Respuesta: <input type="range" problema en -webkit-appearance:

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.
  #5 (permalink)  
Antiguo 03/04/2011, 14:31
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: <input type="range" problema en -webkit-appearance:

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

Última edición por kseso?; 04/04/2011 a las 07:34
  #6 (permalink)  
Antiguo 03/04/2011, 16:39
 
Fecha de Ingreso: junio-2010
Mensajes: 105
Antigüedad: 7 años, 5 meses
Puntos: 1
Respuesta: <input type="range" problema en -webkit-appearance:

i como puedo hacer que se vea el fondo en un range vertical??
  #7 (permalink)  
Antiguo 04/04/2011, 07:42
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: <input type="range" problema en -webkit-appearance:

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

Etiquetas: css, php, range, slider, vertical
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:12.