¿Cómo configuro el ancho (en píxeles) de un control deslizante de entrada?

Para este código HTML:¿Cómo configuro el ancho (en píxeles) de un control deslizante de entrada?

<div> 
    <code>/range/1-3</code><br /> 
    <input type="range" value="0" min="0" max="100" onchange="send('/range/1', parseInt(this.value))" /><br /> 
    <input type="range" value="0" min="0" max="100" onchange="send('/range/2', parseInt(this.value))" /><br /> 
    <input type="range" value="0" min="0" max="100" onchange="send('/range/3', parseInt(this.value))" /> 
</div>

Me gustaría añadir un poco de CSS en la cabecera de mi archivo HTML para establecer el ancho de ciertas clases de control deslizante.

Aquí hay un enlace al archivo completo que incluye 3 definiciones de CSS y una breve JS para pasar valores dentro y fuera de los controles deslizantes.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <script type="text/javascript" charset="utf-8"> 

     var ws = null 

     window.addEventListener('load', function() { 
     if ('WebSocket' in window) { 
      ws = new WebSocket('ws://localhost:60001') 
      ws.onmessage = function(e) { 
      var m = JSON.parse(e.data) 
      if (m) { 
       var e = document.getElementById(m[0]) 
       if (e) 
       e.value = parseInt(m[1] * 100) 
      } 
      } 
     } 
     }) 

     function send(k, v) { 
     var m = JSON.stringify([k, v]) 
     if (ws && ws.OPEN) 
      ws.send(m) 
     if (console) 
      console.log(m) 
     } 

    </script> 
     <style type="text/css" media="screen"> 

      div { 
       margin-bottom: 1em; 
      } 

      code { 
       color: gray; 
      } 
      .slider-width { 
       width: 100px; 
      } 

    </style> 
    </head> 
    <body> 

    <div> 
     <code>/qc/lfo/1</code><br /> 
     <input id="/qc/lfo/1" type="range" /> 
    </div> 

    <div> 
     <code>/range/1-3</code><br /> 
     <input class="slider-width" type="range" value="0" min="0" max="100" onchange="send('/range/1', parseInt(this.value))" /><br /> 
     <input class="slider-width" type="range" value="0" min="0" max="100" onchange="send('/range/2', parseInt(this.value))" /><br /> 
     <input class="slider-width" type="range" value="0" min="0" max="100" onchange="send('/range/3', parseInt(this.value))" /> 
    </div> 

    <div> 
     <code>/checkbox/1-3</code><br /> 
     <input type="checkbox" onchange="send('/checkbox/1', this.checked)" /> 
     <input type="checkbox" onchange="send('/checkbox/2', this.checked)" /> 
     <input type="checkbox" onchange="send('/checkbox/3', this.checked)" /> 
    </div> 

    <div> 
     <code>/radio/1</code><br /> 
     <input type="radio" name="/radio/1" value="1" onchange="send('/radio/1', 1)" /> 
     <input type="radio" name="/radio/1" value="2" onchange="send('/radio/1', 2)" /> 
     <input type="radio" name="/radio/1" value="3" onchange="send('/radio/1', 3)" /> 
    </div> 

    <div> 
     <code>/text/1</code><br /> 
     <input type="text" name="/text/1" onkeyup="send(this.name, this.value)" /> 
    </div> 

    <div> 
     <code>/select/1</code><br /> 
     <select name="/select/1" onchange="send(this.name, this.value)"> 
     <option value="First">First</option> 
     <option value="Second">Second</option> 
     <option value="Third">Third</option> 
     </select> 
    </div> 

    <div> 
     <code>/button/1</code><br /> 
     <input type="button" name="/button/1" value="button" onmousedown="send(this.name, true)" onmouseup="send(this.name, false)" onmouseout="send(this.name, false)" /> 
    </div> 

    </body> 
</html>

Fuente

2012-05-25 wide_eyed_pupil

.slider-width100 
{ 
    width: 100px; 
}

El código anterior es la sintaxis ancho definición se debe utilizar para peinar el ancho. Esto estará en un archivo css separado que debe estar vinculado a la página. Para usarlo debe establecer el atributo de clase de la etiqueta de la siguiente manera:

class="slider-width100"

Si la regla se sobrescribe con otras normas que tienen una prioridad css más alto, usted podría considerar utilizar este feo corte en su definición de reglas CSS :

.slider-width100 
{ 
    width: 100px !important; 
}

Fuente

2012-05-25 09:56:43

Cuando uso este estilo dentro del archivo HTML funciona bien. Cuando coloco un archivo externo, no funciona. No se puede entrenar por qué, CSS se está cargando porque los cambios de estilo de color de texto funcionan. ¿Qué podría estar haciendo mal? –

Ha eliminado el atributo "respuesta" de mi respuesta. ¿Puedes decirme por qué y cuál fue el problema? –

¿Estás seguro de que la regla se colocó en el mismo CSS que se vinculó con éxito a la página? ¿Estás seguro de que no existe otra regla de CSS que sobrescriba esta regla debido a una mayor prioridad? Además, si esto funciona en su HTML, podemos decir con seguridad que sus problemas no provienen de esta regla, porque está funcionando. Puede probar esto creando un archivo CSS que contenga solo esta regla y vinculando este archivo solo a su HTML. Esto sería una prueba de concepto. –

¿Cómo configuro el ancho (en píxeles) de un control deslizante de entrada?

Respuesta

Cuestiones relacionadas