【问题标题】:jquery dropdown selected text padding asp.netjquery下拉选择文本填充asp.net
【发布时间】:2012-05-29 23:50:24
【问题描述】:

我正在使用来自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;
}

【问题讨论】:

    标签: jquery asp.net drop-down-menu stylesheet jquery-selectbox


    【解决方案1】:

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

    text-indent: 50px;
    

    为我工作

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-07-08
      • 1970-01-01
      相关资源
      最近更新 更多