0

我使用来自http://www.misfitgeek.com/2011/04/jquery-styled-dropdownlist/ 的jquery 下拉选择框，
它工作正常，除了我不知道如何设置 padding-left: 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;
}
4

1 回答 1

0

花了几个小时后，我发现只是给

text-indent: 50px;

为我工作

于 2012-05-23T15:48:17.943 回答