html5中，input 的属性type="range"，样式怎样美化

Posted 2023-03-31

CSS代码：
input font-size: 14px; font-weight: bold;

input[type=range]:before content: attr(min); padding-right: 5px;
input[type=range]:after content: attr(max); padding-left: 5px;

output
display: block;
font-size: 5.5em;
font-weight: bold;


HTML代码：
<form method="post">
<h4>音量控制</h4>
<input type="range" name="range" min="0" max="10" step="1" value="" />
<output name="result"> </output>
</form>

JS代码：
(function()
var f = document.forms[0],
range = f['range'],
result = f['result'],
cachedRangeValue = localStorage.rangeValue ? localStorage.rangeValue : 5;

// 检测浏览器是否是足够酷
// 识别range input.
var o = document.createElement('input');
o.type = 'range';
if ( o.type === 'text' ) alert('不好意思，你的浏览器还不够酷，试试最新的Opera浏览器吧。');

// 设置初始值
// 无论是否本地存储了，都设置值为5
range.value = cachedRangeValue;
result.value = cachedRangeValue;

// 当用户选择了个值，更新本地存储
range.addEventListener("mouseup", function()
alert("你选择的值是：" + range.value + ". 我现在正在用本地存储保存此值。在现代浏览器上刷新并检测。");
localStorage ? (localStorage.rangeValue = range.value) : alert("数据保存到了数据库或是其他什么地方。");
, false);

// 滑动时显示选择的值
range.addEventListener("change", function()
result.value = range.value;
, false);

)(); 参考技术A 自己用html元素代替吧，想怎么写就怎么写。我这里倒有一个修改type="range"的input标签，但是火狐浏览器不兼容，你要吗

HTML5中input元素新增加哪些type属性值？它们有啥作用？

参考技术A 在HTML5中，为input元素新增了以下一些type属性值，用来丰富文本框的类型。
color：用于指定颜色的控件。
date：用于输入日期的控件（年，月，日，不包括时间）。
datetime：基于 UTC 时区的日期时间输入控件（时，分，秒及几分之一秒）。
datetime-local：用于输入日期时间控件，不包含时区。
email：用于编辑 e-mail 的字段。
month：用于输入年月的控件，不带时区。
number: 用于输入浮点数的控件。
range：用于输入不精确值控件。
search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
tel：用于输入电话号码的控件。
time：用于输入不含时区的时间控件。
url：用于编辑URL的字段。。
week：用于输入一个由星期-年组成的日期，日期不包括时区。推荐你去一个教学网站 秒秒学上把这些知识过一遍，夯实下基础。本回答被提问者和网友采纳 参考技术B http://www.w3school.com.cn/html5/html_5_form_input_types.asp 参考技术C

 HTML5中都新增了这些元素属性