CODEWITHSUNDEEP
asp.netcsshtml-select
Rakesh
Rakesh

Reputation: 2790

Styling DropDownList ASP.NET

Hi I am trying to make my DropDownList like this in my ASP.NET web application.

enter image description here

I cant't use the select tag because I am already bounded some data to the DropDownList. Basically I am trying to remove the default arrow button from the DropDownList and add this image as background. There is any way to do this using CSS. This is the css I have used

.drop-down-style
{
  width:150px;
  height:20px;
  border:solid 2px #a3a4a6;
  background-image:url('../Images/DropDownImage.gif');
}

Upvotes: 0

Views: 16186

Answers (2)

Fred
Fred

Reputation: 949

Something like this?

CSS:

.styled-select {
    width: 308px;
    height: 23px;
    overflow: hidden;
    background:url(arrow_xs.png) no-repeat 225px #FFF;
    border: 1px solid #ccc;
}
.styled-select select {
    background: transparent;
    width: 309px;
    padding-right: 4px;
    padding-bottom:7px;
    padding-left: 4px;
    padding-top: 0px;
    font-size: 12px;
    line-height: 1;
    border: none;
    border-radius: 0;
    height: 34px;
    -webkit-appearance: none;
}

HTML

<div class="styled-select">
    <select>
        <option>First option</option>
        <option>Second option</option>
    </select>
</div>

edit: You can add an arrow with positioning (div).

edit I put this in a jsfiddle for you: http://jsfiddle.net/X4J3L/1/

Upvotes: 2

Ali Umair
Ali Umair

Reputation: 1424

rather then use some third party plugins or jquery scripts , you should use ajax toolkit's combo box. see an example here

Combo box example

Upvotes: 0

Related Questions