How to Inline Radio Button like Apple.com

Design help General
1

I must style multipic Radial selector so box selects radial button.

Screenshot A: We must make div box select radial button

image
image1649×695 72.9 KB

Screenshot B: Apple has a similar function with Radio selector with inline styling

image
image848×492 26.6 KB

Page: http://html-sandbox.webflow.io/div-block-radial-selector

Designer Shared:
https://preview.webflow.com/preview/html-sandbox?utm_source=html-sandbox&preview=e67118bc353dff859a7c3e046fc087ce

2

Has anyone have success with building textbox type selectors for radio?

3

The easiest method to make a <label> clickable is to give an ID #checkbox to the checkbox, and to add a custom attribute for="checkbox" to the <label>.

But foris reserved by Webflow:

image

So another method to achieve that: the <label> should include the <input>. It’s actually a very good HTML practice for accessibility.

So instead of:

<label for="cheese">Do you like cheese?</label>
<input type="checkbox" name="cheese" id="cheese">

use:

<label>Do you like peas?
  <input type="checkbox" name="peas">
</label>

In Webflow the code for a checkbox doesn’t support that yet (and you can’t modify it)

svbf4

But you can use a custom code box inside of the form block

amb9k

Now the size of your <label> is your click/touch area.

Just avoid 2 things in order not to break accessibility:

  • don’t put a link inside the label
  • don’t put anything else than text and the input inside the label

edit: did the demo with a checkbox, apply to radio of course.

1 Like
4

I made a quick demo of radio and checkbox hack/styling in Webflow.

http://customize-form.webflow.io/

There’s a link in the page to open the site in Webflow.

1 Like
5

Well… here is chrome and here is firefox

I don’t suppose that’s how it should look?

6

Awesome thanks @vincent!

1 Like