Jump to content



Photo

[CSS] Styling a select/option list.


  • Please log in to reply
6 replies to this topic

#1 Axel

Axel

    --[Est. 1986]--

  • 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

Axel

    --[Est. 1986]--

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

Posted 18 January 2013 - 19:27

Any ideas?

#3 threetonesun

threetonesun

    Neowinian Senior

  • Tech Issues Solved: 1
  • 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

Axel

    --[Est. 1986]--

  • 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

    http://seapip.com

  • Tech Issues Solved: 15
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 20 January 2013 - 12:35

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

#6 ashpowell

ashpowell

    Neowinian

  • Joined: 13-November 06
  • Location: UK
  • OS: Windows 8
  • Phone: Nexus 5

Posted 20 January 2013 - 12:43

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

#7 goodbytes

goodbytes

    Just below average Joe

  • Tech Issues Solved: 1
  • 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.



Click here to login or here to register to remove this ad, it's free!