2

[I don't want the Unicode character]
For example: With using Black down-pointing triangle.
It'll using -webkit-appearance: none; to make it look better.

It would be simple as:
Select ▼
to
Select ▼
Value1
Value2
or something similar

HTML: 

<select>
  <option>Value1</option>
  <option>Value2</option>
</select>

QUESTION: How to do it in pure CSS, without any JavaScript?

rtruszk
  • 3,902
  • 13
  • 36
  • 53
M Haidar Hanif
  • 35
  • 1
  • 2
  • 10

2 Answers2

6

Select boxes are not really styleable, so I wouldn't be surprised if this was impossible. Some limited styling options are available, but even they are unreliable. The only way to effectively style a select box is via jQuery and, unfortunately, images. My favourite form styling plugin is this Uniform - maybe it's worth to have a look at it.

I came up with this pure HTML, hacky solution, but it sucks. The arrow catches mouse events before they reach the select box. You'd need to do some hacking to eliminate that.

mingos
  • 23,778
  • 12
  • 70
  • 107
  • Yeah, it really is. Impossibility just went through my mind. But it's way much better than this http://jsfiddle.net/hedaru/YZXcj/. The select text sticks with the character. How about using "span" rather than "p"? – M Haidar Hanif Dec 17 '10 at 12:16
  • And unfortunately, the plugin is using image for that. And it's not pure css. – M Haidar Hanif Dec 17 '10 at 12:19
  • I guess span is OK too, it wouldn't even need the display:block thing, as it's an inline element :). Uniform does indeed work on images. If it's inconvenient for you, then indeed it's not what you're looking for :(. – mingos Dec 17 '10 at 13:58
  • Yeah, it really is. Oh, I just know we don't need display:block for a span. Cool thanks for your help. :D – M Haidar Hanif Dec 19 '10 at 06:37
  • Oh, ouch, I just noticed that I had written `display:block`, while the `p` element had `display:inline` :D. I meant that `p` is a blick level element and requires `display:inline`, while `span` is displayed inline by default :). I guess you got that anyway, I just hate being imprecise :). – mingos Dec 19 '10 at 11:26
2

You can see here a css only solution, available only for webkit

Ionuț Staicu
  • 21,360
  • 11
  • 51
  • 58
  • Too bad it will mess up everything that's not webkit-powered. Styling form elements is especially hilarious in IE, and Opera will just give you the finger if you try it :D. Still, thanks for the link, it's definitely an interesting read. – mingos Dec 17 '10 at 21:42
  • Actually all form elements are kinda tricky to style. I always prefer to let them... pure, and avoid using all weird tricks. – Ionuț Staicu Dec 18 '10 at 08:27
  • Well... Not really. They are using embeded image (i'm not sure if this is the correct name though). No extra request is made to the server. :) – Ionuț Staicu Dec 19 '10 at 06:48
  • Embedded Image? (double d) :) Some other forum told that. I see, that can be a good solution if I can't find further completion for not using any image. Thanks. – M Haidar Hanif Dec 19 '10 at 06:55
  • Take a look here http://css-tricks.com/data-uris/ I not old-browser-friendly, but i guess you don't care to much if you go with this solution :) – Ionuț Staicu Dec 19 '10 at 09:34
  • @Ionut: Yeah, that can be the other way. Unfortunately, it doesn't look good in the code. – M Haidar Hanif Feb 06 '11 at 11:24
  • Code is for machine. If you really want to read smth, grab a book :) – Ionuț Staicu Feb 07 '11 at 13:56