CODEWITHSUNDEEP
jqueryhtmlcss
bugfixr
bugfixr

Reputation: 8077

CSS for the "down arrow" on a <select> element?

Is it possible to stylize the down arrow on a drop down select element? i.e., (<select><option>--></option></select>)

I suspect the answer is no because of the way IE handles that particular element. If there isn't a way, does anyone know of a 'fake' drop down box using javaScript that would mimic that behavior but give me the ability to customize?

Upvotes: 36

Views: 171929

Answers (11)

Diego
Diego

Reputation: 29

http://jsfiddle.net/u3cybk2q/2/ check on windows, iOS and Android (iexplorer patch)

.styled-select select {
   background: transparent;
   width: 240px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
}
.styled-select {
   width: 240px;
   height: 34px;
   overflow: visible;
   background: url(http://nightly.enyojs.com/latest/lib/moonstone/dist/moonstone/images/caret-black-small-down-icon.png) no-repeat right #FFF;
   border: 1px solid #ccc;
}
.styled-select select::-ms-expand {
    display: none; /*patch iexplorer*/
}
  <div class="styled-select">
       <select>
          <option>Here is the first option</option>
          <option>The second option</option>
       </select>
    </div>

Upvotes: -1

MayhemBliz
MayhemBliz

Reputation: 227

You can achieve this with just CSS and your down arrow as an image positioned absolute with a "pointer-events: none;" see my example below:

<select>
  <option value="1">1 Person</option>
  <option value="2">2 People</option>
</select>
<img class="passthrough" src="downarrow.png" />

.passthrough {
    pointer-events: none;
    position: absolute;
    right: 0;
}

Upvotes: 1

Jan Hančič
Jan Hančič

Reputation: 53931

Maybe you can use jQuery selectbox replacement. It's a jQuery plugin.

Upvotes: 12

jabram
jabram

Reputation: 653

There's a cool CSS-only solution to styling dropdowns here: http://bavotasan.com/2011/style-select-box-using-only-css/

Basically, wrap the select in a container div, style the select to be 18px wider than the container with a transparent background, give overflow:hidden to the container (to chop off the browser-generated arrow), and add your background image with stylized arrow to the container.

Doesn't work in IE7 (or 6), but seriously, I say if you're using IE7 you deserve a less-pretty dropdown experience.

Upvotes: 49

marsupial
marsupial

Reputation: 45

This will change inputs, select etc to the old style grey not sure if you can manipulate after that: In <head> put:

<meta http-equiv="MSThemeCompatible" content="NO">

Upvotes: 0

rubbermind
rubbermind

Reputation: 9

Try this

   <div style='position:relative;left:0px;top:0px;
        onMouseOver=document.getElementById('visible').style.visibility='visible' 
        id='hidden'>10
   <select style='position:absolute;left:0px;top:0px;cursor:pointer;visibility:hidden;'
        onMouseOut=document.getElementById('visible').style.visibility='hidden'
        onChange='this.form.submit()' 
        id='visible' multiple size='3'>";
   <option selected value=10>10</option>
   <option value=20>20</option>
   <option value=50>50</option>
   </select>
   </div>

Upvotes: 0

Ty.
Ty.

Reputation: 1820

No, the down arrow is a browser element. It's built in [and different] in every browser. You can, however, replace the select box with a custom drop down box using javascript.

Jan Hancic mentioned a jQuery plugin to do just that.

Upvotes: 5

Neil Barnwell
Neil Barnwell

Reputation: 42125

You can't style combos very well using CSS.

The guys at FogBugz made a pretty good custom combo using JavaScript, so it is possible, it just takes a lot of work to get it right.

Better to stick with the standard one for version 1, then see if it's worth updating it once your app is in the wild.

Upvotes: 3

localshred
localshred

Reputation: 2233

You would need to create your own dropdown using hidden divs and a hidden input element to record which option was "selected". My guess is that @Jan Hancic's link he posted is probably what you're looking for.

Upvotes: 0

wvanbergen
wvanbergen

Reputation: 2324

I don't know if it is stylable with CSS (probably not in IE), but please: do not use a "fake" drop-down box using javascript, because the usability of these things usually is horrible. Among other things, keyboard navigation is usually absent.

Upvotes: 2

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

The drop-down is platform-level element, you can't apply CSS to it.

You can overlay an image on top of it using CSS, and call the click event in the element beneath.

Upvotes: 3

Related Questions