CODEWITHSUNDEEP
formscss
Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

How to give background images in select tag in pure css?

I want to do this

enter image description here

This is select drop down of form

My code is

HMTL

<select>
                        <option>Country</option>
                        <option>India</option>
                        <option>USA</option>
                    </select>

Css

select{
    width:197px;
    height:45px;
    border:solid 1px #13669b;
    box-shadow:0 5px 2px 0px rgba(0,0,0,0.06) inset;
    background:rgba(256,256,256,0.7);
    color:#13669b;
    font-size:16px;
    font-family: 'LatoBold';
    padding:0 14px;
    line-height:45px;
}

I want to this only pure css. How?

Upvotes: 1

Views: 10413

Answers (4)

akalucas
akalucas

Reputation: 476

There is no way to create a dropdown box like that with pure css (yet).

You can create your own js/css dropdown plugin or use one of the many jQuery/css plugins already available.

Upvotes: 2

Per Salbark
Per Salbark

Reputation: 3645

Dropdowns are implemented differently in different browsers, and styling is not widely supported. This has it's reasons. For one: consider the dropdowns on iPads/iPhones. They work radically different than desktop application dropdowns.

If you want a styled dropdown, you will have to build it yourself with lists and javascript. Or use one of numerous libraries available for this (which is further proof that no pure CSS solution is available).

Upvotes: 0

SebScoFr
SebScoFr

Reputation: 901

This solution works with pure CSS but it's Chrome-related. See the following example:

select {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
  background-image: url(../images/select-arrow.png), 
    -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  color: #555;
  font-size: inherit;
  margin: 0;
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Haven't tried to replace the -webkit prefix by a -moz one for it to be compatible with Firefox browsers, it might actually work as well, you should give it a go.

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382686

I am not sure if there is EASY cross browser way to do it but if you with combination of CSS + jQuery, you can get it working in all browsers in use:

See the tutorial on how to do it and modify the CSS for the look you want.

Screenshot:

enter image description here

Upvotes: 1

Related Questions