Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/fast/forms/select/basic-selects.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>
Height smaller than font-size, whole select shrinks but baseline is unchanged:<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>