Question

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

Answer 1

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>