[RESOLVED] Box around html5 range slider

I would like to draw a visual box of 2px solid blue around an HTML5 range slider, but the bordered div does not seem to draw correctly around it.

[code=html]
<form oninput=”output.value=slider.value”>
<div id=”box”>
<input id=”slider” type=”range” min=”1″ max=”11″ name=”tap”>
</div>
<output id=”output”>5</output>
</form>
[/code]

[CODE]
input[type=”range”]{
width: 500px;
margin: 10px;

color: blue;
font-family:cursive;
font-size: 2em;
}

input[type=”range”]::before {
content: attr(min);
}
input[type=”range”]::after {
content: attr(max);
}

#output {
display: block;
margin-top: 30px;

color: orange;
font-size: 1.5em;
}

#box {
width: 500px;
border: 2px solid blue;
border-radius: 10px;
}
[/CODE]

When I inspect the slider, I see this: [url]http://oi64.tinypic.com/21bq1ie.jpg[/url] It seems like either the box div isn’t aware of the slider or the other way around.

What’s the problem here?

Also in #CSS _↴