70 lines
2.8 KiB
HTML
70 lines
2.8 KiB
HTML
<!DocType html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
div {
|
|
border:1px solid red;
|
|
line-height:1em;
|
|
}
|
|
.borderRadius {
|
|
padding:10px;
|
|
-webkit-border-radius: 9px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div>
|
|
|
|
Whitespace in option text:<select><option>f o o</option></select>a<select><option DISABLED>f o o</option></select>b<br><br>
|
|
Simple select control:<select><option>foo</option><option>bar</option></select>a<select DISABLED><option>foo</option><option>bar</option></select>b<br><br>
|
|
Line-height should be ignored:<select style="line-height:2em"><option>foo</option></select>a<select style="line-height:2em" DISABLED><option DISABLED>foo</option><option>bar</option></select>b<br><br>
|
|
Padding should be respected, the arrow button shouldn't change size:<select style="padding:4px;"><option>foo</option></select>a<select style="padding:4px;" DISABLED><option>foo</option></select>b<br><br>
|
|
Border should be respected:<select style="border:8px solid #3cf;"><option>foo</option></select>a<select style="border:8px solid #3cf;" DISABLED><option>foo</option></select>b<br><br>
|
|
Border + padding:<select style="padding:5px;border:4px solid #3cf;"><option>foo</option></select>a<select style="padding:5px;border:4px solid #3cf;" DISABLED><option>foo</option></select>b<br><br>
|
|
Height larger than font-size, button should grow, text baseline should center:<select style="height:30px"><option>foo</option></select>a<select style="height:30px" DISABLED><option DISABLED>foo</option></select>b<br><br>
|
|
Heigh smaller than font-size, whole select shrinks and is baselined with the text:<select style="height:3px"><option>foo</option><option>bar</option></select>a<select style="height:3px"><option DISABLED>foo</option><option>bar</option></select>b<br><br>
|
|
|
|
|
|
select control with size=0:<br>
|
|
<select size=0>
|
|
<option>Future Series </option>
|
|
<option>ICC Intercontinental Cup </option>
|
|
<option>Twenty20 World Championship </option>
|
|
<option>Stanford 20/20 </option>
|
|
<option>All future series </option>
|
|
</select><br>
|
|
|
|
select control with size=1:<br>
|
|
<select size=1>
|
|
<option>Future Series </option>
|
|
<option>ICC Intercontinental Cup </option>
|
|
<option>Twenty20 World Championship </option>
|
|
<option>Stanford 20/20 </option>
|
|
<option>All future series </option>
|
|
</select><br>
|
|
|
|
Non-styled select control:<br>
|
|
<select class="borderRadius" style="border-width:1px">
|
|
<option>Future Series </option>
|
|
<option>ICC Intercontinental Cup </option>
|
|
<option>Twenty20 World Championship </option>
|
|
<option>Stanford 20/20 </option>
|
|
<option>All future series </option>
|
|
</select><br>
|
|
|
|
Styled select control with large border-radius:<br>
|
|
<select class="borderRadius" style="background-color:#3cf">
|
|
<option>Future Series </option>
|
|
<option>ICC Intercontinental Cup </option>
|
|
<option>Twenty20 World Championship </option>
|
|
<option>Stanford 20/20 </option>
|
|
<option>All future series </option>
|
|
</select><br>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|