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

Question

對於此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>

我想在我的HTML文件的標題中添加一些CSS來設置某些類滑塊的寬度。

這是一個指向整個文件的鏈接，其中包含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>

Answer 1

.slider-width100
{
    width: 100px;
}

上面的代碼是您應該用於樣式寬度的寬度定義語法。 這將在一個單獨的css文件中，該文件應鏈接到頁面中。 要使用它，您應該像這樣設置標記的class屬性：

class="slider-width100"

如果您的規則被其他具有更高css優先級的規則覆蓋，您可以考慮在您的css規則定義中使用這個丑陋的黑客：

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

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

問題描述

1 個解決方案

解決方案1
5 2012-05-25 09:56:43

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

問題描述

1 個解決方案

解決方案1 5 2012-05-25 09:56:43

解決方案1
5 2012-05-25 09:56:43