Wednesday, March 28th, 2018
Tuesday, May 30th, 2017
Stylish and accessible checkboxes and radio buttons accompanied by an explanation of the CSS involved.
No images were harmed in the making of these form controls.
Wednesday, March 22nd, 2017
Monday, December 5th, 2016
I always loved the way that Gov.uk styled their radio buttns and checkboxes with nice big visible labels, but it turns out that users never used the label area. And because it’s still so frickin’ hard to style native form elements, custom controls with generated content is the only way to go if you want nice big hit areas.
Thursday, January 7th, 2016
Wednesday, January 6th, 2016
Well, this is timely! Just today I was having a really good natter with Charlotte about using checkboxes, specifically sending multiple values to the server:
You’ll notice that the
namegiven to each of these checkbox
inputelements is the same: “reservation-requested-device”. The square brackets (“”) at the end of the
nameare the magic bit that allows the values of each chosen “reservation-requested-device” checkbox to be submitted as the value of “reservation-requested-device”.
See, I wasn’t sure whether that was just a PHP thing (the only server-side input-handling I’ve had much experience of) or whether it was a more general way of sending multiple values.
Update: It seems that the square brackets are indeed a PHP thing. Multiple values will be sent in any case. See this test case.
Sunday, September 6th, 2015
Friday, April 24th, 2015
100 words 033
Charlotte came up with a nifty trick that combines two different techniques she’s been working with.
The first building block is the pattern of using checkboxes, labels, and the
Enter the second building block: flexbox. With flexbox, we’re no longer at the mercy of the source order in our markup. By using
flex-direction: column-reverse, the progressive disclosure trigger can be displayed after the item being toggled.
Tuesday, July 1st, 2014
A clever way of doing progressive disclosure with CSS.
Tuesday, May 22nd, 2007
Eric explores the dark cabbalistic world of attempting to style form controls. This explains why he doesn't use the universal selector for resetting default styles.
Wednesday, April 6th, 2005
A truly excellent piece of DOM scripting by Steve Chipman that replaces checkboxes with images.