CODEWITHSUNDEEP
cssselect
user1802439
user1802439

Reputation: 2891

Select arrow style change

I'm trying to replace the arrow of a select with a picture of my own. I'm including the select in a div with the same size, I set the background of the select as transparent and I'm including a picture(with the same size as the arrow) in the right top corner of the div as background.

It only works in Chrome.

enter image description here

How can I make it work in Firefox and IE9 where I'm getting this:

enter image description here

.styled-select {
  width: 100px;
  height: 17px;
  overflow: hidden;
  overflow: -moz-hidden-unscrollable;
  background: url(images/downarrow_blue.png) no-repeat right white;
  border: 2px double red;
  display: inline-block;
  position: relative;
}

.styled-select select {
  background: transparent;
  -webkit-appearance: none;
  width: 100px;
  font-size: 11px;
  border: 0;
  height: 17px;
  position: absolute;
  left: 0;
  top: 0;
}

body {
  background-color: #333333;
  color: #FFFFFF;
}

.block label {
  color: white;
}
<HTML>

<HEAD>
</HEAD>

<BODY>
  <p/>
  <form action="/prepareUpdateCategoryList.do?forwardto=search">

    <fieldset class="block" id="searchBlock">
      <p>
        <label style="width:80px">Class</label>
        <div class="styled-select">
          <select property="voucherCategoryClass">
    		<option value="0">Select </option>
    		<option value="7382">steam </option>
    	</select>
        </div>

      </p>
    </fieldset>
  </form>
</BODY>

</HTML>

Upvotes: 259

Views: 1111496

Answers (24)

Anoop Kumar
Anoop Kumar

Reputation: 1

select {

    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNiYmIiPjxwYXRoIGQ9Ik02IDlsNiA2IDYtNiIvPjwvc3ZnPg==) !important;
    background-repeat: no-repeat !important;
    background-position-x: 100% !important;
    background-position-y: 50% !important;
    
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -ms-appearance: none !important;
    -o-appearance: none !important;
    appearance: none !important;
}
select::-ms-expand {
    display: none;
}

Upvotes: 0

MuhammadYusuf Qodirov
MuhammadYusuf Qodirov

Reputation: 1

.styled-select {
  width: 100px;
  height: 17px;
  overflow: hidden;
  overflow: -moz-hidden-unscrollable;
  background: url(images/downarrow_blue.png) no-repeat right white;
  border: 2px double red;
  display: inline-block;
  position: relative;
}

.styled-select select {
  background: transparent;
  -webkit-appearance: none;
  width: 100px;
  font-size: 11px;
  border: 0;
  height: 17px;
  position: absolute;
  left: 0;
  top: 0;
}

body {
  background-color: #333333;
  color: #FFFFFF;
}

.block label {
  color: white;
}

<HTML>

<HEAD>
</HEAD>

<BODY>
  <p/>
  <form action="/prepareUpdateCategoryList.do?forwardto=search">

    <fieldset class="block" id="searchBlock">
      <p>
        <label style="width:80px">Class</label>
        <div class="styled-select">
          <select property="voucherCategoryClass">
            <option value="0">Select </option>
            <option value="7382">steam </option>
        </select>
        </div>

      </p>
    </fieldset>
  </form>
</BODY>

</HTML>

Upvotes: 0

webdevz
webdevz

Reputation: 31

We could wrap a HTML tag in the or tag. Then we could apply any icons.

/* CSS */
  span.select-container {
      width: 300px;
      height: 40px;
      display: block;
      position: relative;
  }

  span.select-container select {
      width: 100%;
      height: 100%;
      appearance: none;
      padding: 0.25rem 0.85rem;
  }

  span.select-container::before {
      content: '\2B9F';
      position: absolute;
      width: 2rem;
      height: 100%;
      right: 0;
      top: 0;
      bottom: 0;
      text-align: center;
      font-size: 1rem;
      line-height: 2.5rem;
      pointer-events: none;
  }
<!-- HTML -->
<span class="select-container">
  <select>
    <option disabled="">Select Gender</option>
    <option>Male</option>
    <option>Female</option>
  </select>
</span>

Upvotes: 0

Maxim Paperno
Maxim Paperno

Reputation: 4869

Using gradients to draw the arrow. Big advantage for me is that it is simpler to theme based on other design colors vs. requiring an image or embedding SVGs in the HTML just to update the fill style.

This is a version of Sam's answer above, simplified further, parameterized, annotated and with example.

CodePen version.

(If you're wondering about the color name used here, see https://developer.mozilla.org/en-US/docs/Web/CSS/system-color )

select {
  /* reset (add vendor prefixed versions if you need) */
  box-sizing: border-box;
    appearance: none;
  margin: 0;
  
  /* Other styles, not required. */
  padding: 0.25em;
  
  /* The arrow -- settings */
    --arrow-pad: .25em;   /* space between arrow and border */
    --arrow-size: .5em;   /* width and height of arrow */
    --arrow-color: GrayText;  /* arrow color */
  
    --arrow-offset: calc(var(--arrow-pad) + var(--arrow-size));  /* D.R.Y. */
  
  /* Add space for arrow. */
    padding-right: calc(var(--arrow-offset) * 4) !important;

  /* The arrow - draw using 2 45° gradients with sharp edges. */
  /* Can change angles for a non-square arrow or otherwise get creative here. */
  background-image:
    linear-gradient(45deg,  transparent        50%, var(--arrow-color) 50%),  /* left part of arrow */
    linear-gradient(135deg, var(--arrow-color) 50%, transparent        50%);  /* right part of arrow */
    
  /* Position the arrow on the right side taking desired padding and arrow width into account. */
  background-position:
    calc(100% - (var(--arrow-offset) * 1.5)) 50%,  /* left part of arrow */
    calc(100% - var(--arrow-offset))         50%;  /* right part of arrow */
  
  /* Declare the actual sizing of the arrow "image." */
  background-size:
    var(--arrow-size) var(--arrow-size),  /* left part of arrow */
    var(--arrow-size) var(--arrow-size);  /* right part of arrow */
  
  background-repeat: no-repeat;  /* just one arrow, please */
}
  <select id="my-select" class="select">
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
    <option value="baz">Baz</option>
  </select>

Upvotes: -1

TeemuK
TeemuK

Reputation: 2529

Okay, it seems there are a lot of answers here. Some maybe better than others. Incase someone was desperate enough to scroll down here, here's my two cents:

If you really want to style your dropdown, don't use <select>. div with a regular <ul> inside it will be a lot more flexible. However, if you really insist on using select because you just want the most minimal dropdown, here's mine:

select {
  appearance: none;
  background: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.1018 8C5.02785 8 4.45387 9.2649 5.16108 10.0731L10.6829 16.3838C11.3801 17.1806 12.6197 17.1806 13.3169 16.3838L18.8388 10.0731C19.5459 9.2649 18.972 8 17.898 8H6.1018Z' fill='%23212121'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  border-radius: 2px;
  padding: 0.25rem 2rem 0.25rem 0.75rem;
}
  <select>
    <option value="bottom-right">Bottom right</option>
    <option value="bottom-left">Bottom left</option>
    <option value="top-right">Top right</option>
    <option value="top-left">Top left</option>
  </select>

So the key part is finding a caret svg that you can URL convert into a string. I could enhance it a little, maybe rotate the caret somehow, but really - I'm just happy it isn't god-ugly.

Upvotes: 13

Jeroi
Jeroi

Reputation: 74

Here is the most elegant way to replace arrow:

select {
  padding: 15px 5px 15px 15px;
  border: none;
  font-family: Verdana;
  font-weight: bold;
  background-color: DodgerBlue;
  color: white;
  outline: none;
  min-width: 150px;
  cursor: pointer;

  /*Remove decorations to replace arrow with custom arrow */   
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;  
  &::-ms-expand { display: none };  
}
.custom-select:after {
    /* Here we add font taken from libre office to content */
    content: "▼";
    position: absolute;
    top: 4;
    /* Here we need to calculate fonts place so that if select box width changes the custom button font will be always at same place */
    left: calc(100% - 30px);
    font-size: 80%;
    padding: 12px 7px;
    background-color: DodgerBlue;
    color: white;
    pointer-events: none;
}

Upvotes: 1

iamtheasad
iamtheasad

Reputation: 1127

I wanna clear something that no one mention before I think.

  1. First get your svg image or icon
  2. There you will get some xml code like these <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 10.127L12 18.127L20 10.127H4Z" fill="#8E8E93"/> </svg> try to find it.
  3. And past it after this code data:image/svg+xml;utf8,
  4. Replace the fill color fill="#8E8E93" to this fill="%238E8E93" If you want to add hexadecmal color you should change # to %23

Here is the html code:

<fieldset>
  <label for="editName">Country</label>
  <select class="ra-select">
    <option value="bangladesh" selected>Bangladesh</option>
    <option value="saudi arabia">Saudi Arabia</option>
    <option value="us">Uinited State Of America</option>
    <option value="india">India</option>
  </select>
</fieldset>

Here is the css code:

.ra-select {
   width: 30%;
   padding: 10px;
   /* Replace Default styling (arrow) */
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   background-image: url('data:image/svg+xml;utf8,<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 10.127L12 18.127L20 10.127H4Z" fill="%238E8E93"/></svg>');
   background-repeat: no-repeat;
   background-position-y: 50%;
   background-position-x: 98%;
}

.ra-select:focus,
.ra-select:hover {
   outline: none;
   border: 1px solid #bbb;
}

.ra-select option {
   background-color: #fff;
}

Upvotes: 11

Romualds Cirsis
Romualds Cirsis

Reputation: 852

/* FIX OF UGLY SELECT */
SELECT {
    background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat;
    background-position: calc(100% - 0.75rem) center !important;
    -moz-appearance:none !important;
    -webkit-appearance: none !important; 
    appearance: none !important;
    padding-right: 2rem !important;
}

Adjust variables to match your form styling.

Chrome:

enter image description here

Firefox:

enter image description here

Opera:

enter image description here

Edge:

enter image description here

p.s. Form & Input design via Bootstrap 4

Upvotes: 54

Hasan Tezcan
Hasan Tezcan

Reputation: 1232

.select{
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 98%;
  background-position-y: 50%;
}

Upvotes: 13

Atif Tariq
Atif Tariq

Reputation: 2772

You can use this. Its Tested code

    select {
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right !important;
    appearance: none !important;
    background-size: 25px 25px !important;
    background-position: 99% 50% !important;
}

Upvotes: 4

Sam
Sam

Reputation: 2331

There are a few examples here

It's based off this answer, but I added one to the list to make a design that is even more minimal

select.moreMinimal {

    background-color: inherit;
    display: inline-block;
    font: inherit;
    padding: 0 2.2em 0 1em;    
    margin: 0;      
    cursor: pointer;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

select.moreMinimal {
    background-image:
      linear-gradient(45deg, transparent 50%, gray 50%),
      linear-gradient(135deg, gray 50%, transparent 50%);
    background-position:
      calc(100% - 20px), 
      calc(100% - 15px);
    background-size:
      5px 5px,
      5px 5px;
    background-repeat: no-repeat;
}
  
//TODO: Probably shouldn't be focus, cause when you click it again it's still green
select.moreMinimal:focus {
    background-image:
        linear-gradient(45deg, green 50%, transparent 50%),
        linear-gradient(135deg, transparent 50%, green 50%);
    background-position:
        calc(100% - 15px),
        calc(100% - 20px);
    background-size:
        5px 5px,
        5px 5px;
    background-repeat: no-repeat;
    border-color: green;
    outline: 0;
}

Upvotes: 2

Mohammad Zaer
Mohammad Zaer

Reputation: 696

just do this:

select {

    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIyNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiNiYmIiPjxwYXRoIGQ9Ik02IDlsNiA2IDYtNiIvPjwvc3ZnPg==) !important;
    background-repeat: no-repeat !important;
    background-position-x: 100% !important;
    background-position-y: 50% !important;
    
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -ms-appearance: none !important;
    -o-appearance: none !important;
    appearance: none !important;
}
select::-ms-expand {
    display: none;
}

Upvotes: 7

WebMat
WebMat

Reputation: 135

Simple arrow and clean code

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background: transparent url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat 100% center;
    padding-right: 25px;
}

Upvotes: 2

GucciBananaKing99
GucciBananaKing99

Reputation: 1506

You can also try this:

Heres a Picture of it!

And also run code snippet!

CSS and then HTML:

           #select-category {
            font-size: 100%;
            padding: 10px;
            padding-right: 180px;
            margin-left: 30px;
            border-radius: 1000000px;
            border: 1px solid #707070;
            outline: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background: transparent;
            background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='34' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
            background-repeat: no-repeat;
            background-position-x: 100%;
            background-position-y: 5px;
            margin-right: 2rem;
        }
                <select id="select-category">
                    <option>Category</option>
                    <option>Category 2</option>
                    <option>Category 3</option>
                    <option>Category 4</option>
                    <option>Category 5</option>
                    <option>Category 6</option>
                    <option>Category 7</option>
                    <option>Category 8</option>
                    <option>Category 9</option>
                    <option>Category 10</option>
                    <option>Category 11</option>
                    <option>Category 12</option>
                </select>

Upvotes: 0

svnm
svnm

Reputation: 24308

I have set up a select with a custom arrow similar to Julio's answer, however it doesn't have a set width and uses an svg as a background image. (arrow_drop_down from material-ui icons)

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 5px;
  border: 1px solid #dfdfdf;
  border-radius: 2px;
  margin-right: 2rem;
  padding: 1rem;
  padding-right: 2rem;
}

enter image description here

If you need it to also work in IE update the svg arrow to base64 and add the following:

select::-ms-expand { display: none; }

background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);

To make it easier to size and space the arrow, use this svg:

url("data:image/svg+xml,<svg width='24' height='24' xmlns='http://www.w3.org/2000/svg'><path d='m0,6l12,12l12,-12l-24,0z'/><path fill='none' d='m0,0l24,0l0,24l-24,0l0,-24z'/></svg>");

It doesn't have any spacing on the arrow's sides.

Upvotes: 200

Siddharth Jain
Siddharth Jain

Reputation: 880

Assume, selectDrop is the class present in your HTML tag.So, this much of code is enough to change default arrow icon:

.selectDrop{
      background: url(../images/icn-down-arrow-light.png) no-repeat right #ddd; /*To change default icon with provided image*/
      -webkit-appearance:none; /*For hiding default pointer of drop-down on Chrome*/
      -moz-appearance:none; /*For hiding default pointer of drop-down on Mozilla*/
      background-position-x: 90%; /*Adjust according to width of dropdown*/
    }

Upvotes: -1

sunilkjt
sunilkjt

Reputation: 1005

Check this one It's hacky, simple as that:

  • Set -prefix-appearance to none to remove the styles
  • Use text-indent to "push" the content a bit to the right
  • Finally, set text-overflow to an empty string. Everything that extends beyond it's width will become... nothing! And that includes the arrow.

Now you're free to style it any way you want :)

.selectParent {
  width: 80px;
  overflow: hidden;
}

.selectParent select {
  text-indent: 1px;
  text-overflow: '';
  width: 100px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 2px 2px 2px 2px;
  border: none;
  background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat 60px center;
}
<div class="selectParent">
  <select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
</div>

View on JSFiddle

Upvotes: 16

Siavas
Siavas

Reputation: 5090

This would work well especially for those using Bootstrap, tested in latest browser versions:

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Some browsers will not display the caret when using calc, so we put the fallback first */ 
  background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat 98.5% !important; /* !important used for overriding all other customisations */
  background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat calc(100% - 10px) !important; /* Better placement regardless of input width */
}
/*For IE*/
select::-ms-expand { display: none; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <select class="form-control">
       <option>Option 1</option>
       <option>Option 2</option>
       <option>Option 3</option>
      </select>
    </div>
  </div>
</div>

Upvotes: 26

Maverick09
Maverick09

Reputation: 1075

I have referred this post, it worked like charm , except it did not hide the arrow in IE browser.

However adding following hides the arrow in IE:

&::-ms-expand {
      display: none;
    }

Complete solution ( sass )

$select-border-color: #ccc;
$select-focus-color: green;

select {

    cursor: pointer;
    /* styling */
    background-color: white;
    border: 1px solid $select-border-color;
    border-radius: 4px;
    display: inline-block;
    font: inherit;
    line-height: 1.5em;
    padding: 0.5em 3.5em 0.5em 1em;

    /* reset */
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: linear-gradient(45deg, transparent 50%, $select-border-color 50%),
    linear-gradient(135deg, $select-border-color 50%, transparent 50%),
    linear-gradient(to right, $select-border-color, $select-border-color);
    background-position: calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;

    /* Very imp: hide arrow in IE */
    &::-ms-expand {
      display: none;
    }

    &:-moz-focusring {
      color: transparent;
      text-shadow: none;
    }

    &:focus {
      background-image: linear-gradient(45deg, $select-focus-color 50%, transparent 50%),
      linear-gradient(135deg, transparent 50%, $select-focus-color 50%), linear-gradient(to right, $select-focus-color, $select-focus-color);
      background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, calc(100% - 2.5em) 0.5em;
      background-size: 5px 5px, 5px 5px, 1px 1.5em;
      background-repeat: no-repeat;
      border-color: $select-focus-color;
      outline: 0;
    }
  }

Upvotes: 1

Morpheus
Morpheus

Reputation: 9065

Have you tried something like this:

.styled-select select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}

Haven't tested, but should work.

EDIT: It looks like Firefox doesn't support this feature up until version 35 (read more here)

There is a workaround here, take a look at jsfiddle on that post.

Upvotes: 211

kishan Radadiya
kishan Radadiya

Reputation: 832

It's working in all browser:

select {
    width: 268px;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 5px;
    height: 34px;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
    appearance:none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    background-position-x: 244px;

}

Upvotes: 8

Peter Drinnan
Peter Drinnan

Reputation: 4532

Here is an elegant fix that uses a span to show the value.

Layout is like this:

<div class="selectDiv">
   <span class="selectDefault"></span>
   <select name="txtCountry" class="selectBox">
      <option class="defualt-text">-- Select Country --</option>
      <option value="1">Abkhazia</option>
      <option value="2">Afghanistan</option>
   </select>
</div>

JsFiddle

Upvotes: 32

Dario Corno
Dario Corno

Reputation: 1185

Style the label with CSS and use pointer events :

<label>
<select>
   <option value="0">Zero</option>
   <option value="1">One</option>
</select>
</label>

and the relative CSS is

label:after {
    content:'\25BC';
    display:inline-block;
    color:#000;
    background-color:#fff;
    margin-left:-17px;   /* remove the damn :after space */
    pointer-events:none; /* let the click pass trough */
}

I just used a down arrow here, but you can set a block with a background image. Here is a ugly fiddle sample: https://jsfiddle.net/1rofzz89/

Upvotes: 7

Julio Marins
Julio Marins

Reputation: 10639

Working with just one class:

select {
    width: 268px;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 5px;
    height: 34px;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
    -webkit-appearance: none;
    background-position-x: 244px;
}

http://jsfiddle.net/qhCsJ/4120/

Upvotes: 68

Related Questions