http://www.misfitgeek.com/2011/04/jquery-styled-dropdownlist/
のjqueryドロップダウン選択ボックスを使用して
いますが、パディングの設定方法がわからない場合を除いて、正常に機能しています-左：20px; 選択されたテキストの
選択されたテキストは、丸い角の背景を使用して極端に左に表示され、選択されたテキストにはいくつかの左パディングが必要
です
<!-- aspx -->
<link href='Styles/Selectbox.css' rel='stylesheet' type='text/css' />
<script src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js'
type='text/javascript' charset='utf-8'></script>
<script type='text/javascript' src='Scripts/jquery.selectbox-0.5.js'>
</script>
<script src='Scripts/PageScript.js' type='text/javascript'></script>
<asp:DropDownList runat='server' name='Items' id='Items'
class='StyledDD' ClientIDMode='Static'>
<asp:ListItem>One</asp:ListItem>
<asp:ListItem>Two</asp:ListItem>
<asp:ListItem>Three</asp:ListItem>
<asp:ListItem>Four</asp:ListItem>
</asp:DropDownList>
<!-- jquery function -->
$(document).ready(function () {
$('.StyledDD').selectbox();
});
<!-- CSS --->
/* Drop down styles*/
div.selectbox-wrapper {
position:absolute;
width:400px;
background-color:white;
border:1px solid #ccc;
margin:0px;
margin-top:-10px;
padding:0px;
text-align:left;
max-height:200px;
overflow:auto;
}
/*Drop down list styles*/
div.selectbox-wrapper ul {
list-style-type:none;
margin:0px;
padding:0px;
}
/* Selected item in dropdown list*/
div.selectbox-wrapper ul li.selected {
background-color: #EAF2FB;
}
/* Hover state for dropdown list */
div.selectbox-wrapper ul li.current {
background-color: #CDD8E4;
}
/* Drop down list items style*/
div.selectbox-wrapper ul li {
list-style-type:none;
display:block;
margin:0;
padding:2px;
cursor:pointer;
}
/* Look and feel of select box */
.selectbox
{
margin: 0px 5px 10px 0px;
padding-left:2px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:1em;/* Resize Font*/
width : 190px; /* Resize Width */
display : block;
text-align:left;
background: url('../images/bg_select.png') right;
cursor: pointer;
border:1px solid #D1E4F6;
color:#333;
}