| <!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> |
