Welcome Guest! To access all forums & features, please register an account or sign-in. → Why register?



[CSS] Styling a select/option list.


6 replies to this topic - - - - -

#1 Axel

    --[Est. 1986]--

  • 5,296 posts
  • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 18 January 2013 - 16:09

http://jsfiddle.net/EjvWd/

Here's what I have so far. The only thing I'm having difficulty with is getting a cutom drop down arrow thing on the right hand side.

Help much appreciated :)


#2 OP Axel

    --[Est. 1986]--

  • 5,296 posts
  • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 18 January 2013 - 19:27

Any ideas?

#3 threetonesun

    Neowinian ULTRAKILL

  • 11,277 posts
  • Joined: 26-February 02

Posted 18 January 2013 - 19:38

There's this: http://code.google.com/p/select-box/

The CSS version is a bit of a PITA: http://bavotasan.com...using-only-css/

IMO, unless you're doing a form to fit some crazy site wide UI, it's not worth it.

#4 OP Axel

    --[Est. 1986]--

  • 5,296 posts
  • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 18 January 2013 - 19:49

Cheers! I'll have a look at both these options tomorrow. It's gonna be 3 or 4 forms site wide, just wanted to make my job easier!

#5 +Seahorsepip

    seahorsepip.deviantart.com

  • 935 posts
  • Joined: 23-January 11
  • Location: Vlissingen, Netherlands
  • OS: Windows 8 Pro

Posted 20 January 2013 - 12:35

I'd just make a div with a radio button list styled like a dropdown :p

#6 ashpowell

    Resident Fanatic

  • 503 posts
  • Joined: 13-November 06
  • Location: Derbyshire, UK
  • OS: Windows 7
  • Phone: Nexus 4

Posted 20 January 2013 - 12:43

Kinda hard to style select/upload boxes without extra help from js

#7 Uplift

    Deejayy...

  • 5,162 posts
  • Joined: 07-May 04
  • Location: England

Posted 20 January 2013 - 12:51

the only way you can fully style them is create something in css/jquery/html that provides the same function (a box, with drop down and selection).. have a hidden text box that completed with the selected content... i dont have time to do a fiddle but you can see the functionality i'm talking about here: http://www.upliftweb.co.uk/contact steal the code.