0

How could i style up my select box like this:

enter image description here

main trouble is that my arrow - is transparent background, but i need gray background select with selecting features...

i do it like so:

.modal.custom .modal-body.full-width .styled-select{
    width: 440px;
    -webkit-appearance: none;
}

.modal.custom .modal-body.full-width .styled-select select{
  width: 480px;
  overflow: hidden;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(../images/png/v.png) no-repeat center right #eeeeee;
}

but seems that something is bad...

it look like so:

http://i.imgur.com/IwvoTde.png

and fiddle example:

http://jsfiddle.net/3sebzwxu/

is it real to do as on first image, so that it would be clickable?

brabertaser19
  • 5,570
  • 16
  • 73
  • 171

1 Answers1

0

you just need to specify position of the background using percentages as follows

css:

background: url(https://dl.dropboxusercontent.com/u/59666091/v.png) no-repeat 99% 50% #eeeeee;

What this means is the backround position is at 99%of the box's width (so it doesn't stick to the edge) and 50% of it's height (so it's always centered vertically)

Here is a JSfiddle demo : http://jsfiddle.net/3sebzwxu/1/

Hope this helps

Lazertrax
  • 66
  • 4
  • and what? ) background is still grey, but must be grey only at right – brabertaser19 Feb 02 '15 at 07:55
  • if you want to change the background of the arrow only you'll have to use an arrow image with a grey background and replace the #eeeeee at the end of the background css to #ffffff :) – Lazertrax Feb 02 '15 at 08:00