CODEWITHSUNDEEP
asp.netcssstylesheethtml-select
Bishan
Bishan

Reputation: 15740

Flat DropDownList using CSS

I'm using below css code to flat and style TextBox and DropDownList in my aspx page. style is correctly apply to the TextBox . but DropDownList look is not flat. see the image.

.txtDllBox
{
    border: 1px solid #ccc;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;         
    
}

TextBox and DropDownList

How can i solve this ?

Upvotes: 0

Views: 3782

Answers (2)

karthi
karthi

Reputation: 887

You can place your select box inside a div and add css to div as follows:

div { 
    border:2px solid #ced6e9; 
    -moz-border-radius:8px; 
    border-radius: 8px;
    display: inline-block;
}

select {
    margin: 2px;
    border: none;
}

your html can be like this:

<div>
    <select>
        <option value="0">Select one...</option>
        <option values="1">1</option>
    </select>
</div>

Upvotes: 2

Troy Carlson
Troy Carlson

Reputation: 3121

Not sure if this will work but I don't have enough rep to post as a comment and it doesn't hurt to try. Use the "!important" rule to override any other styles that are possibly being applied to the dropdown.

.txtDllBox
{
    border:                1px solid #ccc  !important;
    border-radius:         4px             !important;
    -moz-border-radius:    4px             !important;
    -webkit-border-radius: 4px             !important;         
}

Note that this may make your CSS more difficult to maintain if any of these styles need to be inherited from parent controls at some point.

Upvotes: 0

Related Questions