Html 如何设置输入滑块的宽度（以像素为单位）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10752189/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I set the width (in pixels) of an input slider?
提问by wide_eyed_pupil
To this HTML code:
对于此 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>
I would like to add some CSS in the header of my HTML file to set the width of certain classes of slider.
我想在我的 HTML 文件的标题中添加一些 CSS 来设置某些滑块类的宽度。
Here's a link to the whole file which include 3 CSS definitions and a short JS for passing values in and out of the sliders.
这是整个文件的链接，其中包括 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>
回答by Lajos Arpad
.slider-width100
{
width: 100px;
}
The code above is the width definition syntax you should use for styling the width. This will be in a separate css file which should be linked into the page. To use it you should set the class attribute of the tag like this:
上面的代码是用于设置宽度样式的宽度定义语法。这将在一个单独的 css 文件中，该文件应该链接到页面中。要使用它，您应该像这样设置标签的 class 属性：
class="slider-width100"
If your rule is overwritten by other rules which have a higher css priority, you might consider to use this ugly hack in your css rule definition:
如果您的规则被其他具有更高 css 优先级的规则覆盖，您可能会考虑在您的 css 规则定义中使用这个丑陋的 hack：
.slider-width100
{
width: 100px !important;
}
