如何自定义HTML5输入范围类型看起来使用CSS？ [英] How to customize the HTML5 input range type looks using CSS?

问题描述

我想在HTML5中自定义范围输入类型的外观，看起来像一个进度条。我试过应用一些常见的CSS属性使用CSS类，但似乎他们不工作。

I want to customize the looks of the range input type in HTML5 to look something like a progress bar. I've tried applying some common CSS attributes using CSS class but it seems that they are not working.

任何一个可以指导我如何自定义它

Can any one direct me how to customize it??

推荐答案

< input type =range> 您已经尝试使用CSS自定义它。 ：）

The <input type="range"> is pretty new and you are already attempting to customize it with CSS. :)

我不会尝试这个，有两个原因：

I wouldn't try that for two reasons:

1. p>有现在和未来几（或多年）可能会出现巨大的兼容性问题。
   认为在现在，一个表单控件，如< select> （自网络开始以来可用）仍然有问题，以跨浏览器方式使用CSS自定义。例如，如果为选择框设置 padding ，许多浏览器（IE7，OPERA9，CHROME5，SAFARI4）将完全忽略填充。
   它只适用于IE8和FF 3.6。 （所有测试都使用HTML5 DOCTYPE，所以在标准模式下完成）。

1. there might be huge compatibility issues now and for the next few (or many) years. Think that in nowdays a form control like <select> (available since the web started) is still problematic to be customized with CSS in a cross browser way. For instance if you set a padding for the select boxes, many browser (IE7, OPERA9, CHROME5, SAFARI4) will totally ignore the padding. It works only IE8 and on FF 3.6. (all tests done with HTML5 DOCTYPE so in standard mode).

< input type =range> 已创建为显示滑块，而不是进度条，试图用CSS欺骗它，以便将滑块转换为进度条，这听起来很奇怪。像试图使用CSS将< textarea> 改成表，但为什么不使用< table> code> to render tables？！

The <input type="range"> has been created to show a slider NOT a progress bar, attempting to cheat on it with CSS in order to transform a slider into progress bar it sounds bizarre. Like trying to use CSS to change a <textarea> into a table, but why don't you simply use a <table> to render tables?!

要在HTML5中显示进度条，由他的答案中的 marcgg 。因为没有浏览器当前正在渲染它，你可以使用一个简单的div与ap里面像这样：

To show a progress bar in HTML5 you should follow the suggestion given by marcgg in his answer. Since no browser is currently rendereing it you could use a simple div with a p inside like this:

<div id="progress" style="position:relative; width:100px; height:20px; border:1px solid #cccccc;">
   <p style="position:absolute; left:0; top:0; background-color:#0000ff; height:100%; width:30%; font-size:0px;">&nbsp;</p>
</div>

然后只需更新 style.width 内部 P 元素的百分比如下：

Then simply update the style.width of inner P element in percent like:

width: 75%

FYI：如果你想在简单的JS中做这里的代码：

FYI: if you want to do that in simple JS here is the code:

document.getElementById('progress').(getElementsByTagName('p')[0]).style.width = '75%';

这篇关于如何自定义HTML5输入范围类型看起来使用CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！