jquery dropdown selected text padding asp.net

1.3k views Asked by At

Im using jquery dropdown selectbox from http://www.misfitgeek.com/2011/04/jquery-styled-dropdownlist/
its working fine except i dont know how to set padding-left: 20px; of selected text
selected text is extremely left im using round corner background and selected text needs some left padding
Can any one help

      <!-- 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;
}
1

There are 1 answers

0
skhurams On BEST ANSWER

after spending some hours i find out that by just giving

text-indent: 50px;

worked for me