如何設置輸入滑塊的寬度（以像素爲單位）？

對此HTML代碼：如何設置輸入滑塊的寬度（以像素爲單位）？

<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>

我想補充一些CSS在我的HTML文件中設置某些類別的滑塊的寬度的頭部。

下面是整個文件的鏈接，其中包含3個CSS定義和一個用於將值傳入和傳出滑塊的簡短JS。

<!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>

來源

2012-05-25 wide_eyed_pupil

.slider-width100 
{ 
    width: 100px; 
}

上面的代碼是你應該爲定型寬度用寬度定義語法。這將在一個單獨的CSS文件中，該文件應鏈接到頁面中。要使用它，你應該設置標籤的類屬性是這樣的：

class="slider-width100"

如果您的規則是由具有較高的CSS優先的其他規則覆蓋，你可以考慮在你的CSS規則定義使用這個醜陋的黑客：

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

來源

2012-05-25 09:56:43

當我在HTML文件中使用這種風格時，它工作正常。當我放入外部文件時，它不起作用。無法解決原因，因爲文本顏色樣式發生變化，因此CSS被加載。我可能會做錯什麼？ –

你已經從我的答案中刪除了「答案」屬性。你能告訴我爲什麼和什麼是問題？ –

您確定該規則已放入您成功鏈接到頁面的相同CSS中嗎？您確定沒有其他的CSS規則會因爲優先級更高而覆蓋此規則嗎？另外，如果這在你的HTML中起作用，那麼我們可以肯定地說你的問題不是源於這個規則，因爲它工作。您可以通過創建僅包含此規則的CSS文件並將此文件僅鏈接到您的HTML來進行測試。這將是一個概念的證明。 –

如何設置輸入滑塊的寬度（以像素爲單位）？

回答

相關問題