How is the "N-in-one" or "pill" button effect effected?

Question

I want to use what I think is called the "pill" button that can be seen here: http://jqueryui.com/themeroller/ (the "Choice 1 | Choice 2 | Choice 3" widget)

Here's a screen shot:

enter image description here

What html and/or css and/or jquery is required to achieve that look? I want to be able to highlight 0..all of the buttons (based on which ones are applicable at the time/in the current state).

it's jquery ui radio inputs http://jqueryui.com/button/#radio — David Fregoli, Jun 30 '13 at 17:21
[download](http://jqueryui.com/download) -> Components -> Widgets -> ☑ Button -> [Download] — Shaddow, Jun 30 '13 at 17:21
@Shaddow: I know; I'm kind of excited by Excite-Bike (not in a weird way). — B. Clay Shannon-B. Crow Raven, Jun 30 '13 at 17:30

score 1 · Accepted Answer · answered Jun 30 '13 at 17:22

1

Read the information about "buttonset" here. In short, you create a container with several radio buttons in it, and apply buttonset to the container, and you will get a radio control that's styled as jQuery UI buttons.

answered Jun 30 '13 at 17:22

hobbs

223,387
19
210
288

Oh, they're radio buttons; that's not going to work, then. I need more than one to potentially be enabled. IOW, they are options, of which 0..all can be available; I want to indicate their availableness by appearance, but not have only one be the "choice." I guess their choice of wording, using "choice" should have been a tipoff. – B. Clay Shannon-B. Crow Raven Jul 01 '13 at 01:04
1

@ClayShannon It probably works for checkboxes too. UPDATE: [Ta-da!](http://codepen.io/millimoose/pen/xweJu) – millimoose Jul 01 '13 at 01:08

How is the "N-in-one" or "pill" button effect effected?

1 Answers1