locked
Combo box styling RRS feed

  • Question

  • User-444581312 posted

    I have currently styled the ajax combo box as following, is it possible to:

          <act:ComboBox ID="cboRisk" runat="server" CssClass="combostyle" DropDownStyle="DropDownList">
                    <asp:ListItem Text="Actual Item #1" Value="SomeValue" />
                    <asp:ListItem Text="Actual Item #2" Value="3" />
                    <asp:ListItem Text="Actual Item #3" Value="xxx" />
                </act:ComboBox>

    1. Change the selected item colour, the background colour that shows when moving up and down the list? 

    2. Change the background colour in the input box when an item has been selected?

    3. Stop the cursor from entering the box as it is a drop down list. 

       .combostyle .ajax__combobox_inputcontainer {
                border-right: 0px none;
                padding: 1px 0px 0px 5px;
            }
    
                .combostyle .ajax__combobox_inputcontainer input {
                    border: solid 1px #085394;
                    height: 24px; 
                }
    
    
            .combostyle .ajax__combobox_buttoncontainer {
                ;
                top: 3px;
                left: 2px;
            }
    
    
                .combostyle .ajax__combobox_buttoncontainer button {
                    padding: 1px;
                    width: 24px;
                    height: 24px; 
                    background: #085394;
                    -webkit-border-radius: 3px;
                    -moz-border-radius: 3px;
                    border-radius: 3px;
                    border: solid 1px #483D8B;
                    -ms-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
                    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
                    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
                    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
                    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
                    margin-left: 1px;
                    margin-bottom: 1px;
                    -webkit-transition-duration: 0.2s;
                    -moz-transition-duration: 0.2s;
                    -o-transition-duration: 0.2s;
                    transition-duration: 0.2s;
                   

    Tuesday, February 28, 2017 4:40 PM

All replies