CSS grid - DIV's as radio

Hello I’m trying to create a css grid form and I want to stylize the grid elements as grid elements but behave as radios.

I tried a couple of things but most of them use absolute position and that doesn’t work well with css grid (or I’m doing it wrong).

Below is the example of how I would like to have it to look. And the grid should collapse when resizing (which I could fix with @media)

Is this possible or are there better (visually wise) ways of approaching this?

I don’t understand what you are trying to do. Do you just want to hide the radio input but still have it clickable? If so, you can use visibility: hidden; on it.

To make the div clickable without using JavaScript, you need to make sure it’s inside the label for the radio button. The radio button itself can be hidden with the method mentioned in my post below.

Working example:

@lionel-rowe I’m following up on what you did, Is it correct to assume that your example is also makeable in css grid instead of flex? (I’m not at home right now, will try css grid alternative tonight.)

The overarching document structure shouldn’t affect it at all, I just used flexbox for the sake of making a quick demo.

@lasjorg indeed that’s what I’m trying to achieve. :slight_smile:

What you have now works you just need to add Jquery and fix the selector for the click handler.


Edit: That selector obviously will only work for the one input

I’ve updated my codepen, as I realized my proposed solution failed accessibility considerations (impossible to navigate with keyboard).

The fix:

.invisible-radio {
-   display: none;
+   /* per https://a11yproject.com/posts/how-to-hide-content/ */
+   position: absolute;
+   height: 1px;
+   width: 1px;
+   overflow: hidden;
+   clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+   clip: rect(1px, 1px, 1px, 1px);


+ .invisible-radio:focus + label .styled-radio {
+   outline: 8px solid blue;
+ }

@lionel-rowe Is it possible to show an example with css grid because it doesn’t seem to work with mee transforming it to css grid. The flex box approach isn’t responsive.

To be honest, I haven’t used CSS grid much. CSS grid is overkill for most use cases, unless you have complex full-page layouts that don’t fit into standard columns and rows.

Flexbox is perfect for responsive layouts most of the time. For instance, just by adding flex-wrap: wrap; to the container, the styled radio buttons now wrap around on smaller screens (I updated my pen with the change).

Using grid shouldn’t affect anything. If you change the Codepen to make the .flex-container use Grid it works just fine.

.flex-container {
  display: grid;
  justify-items: center;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

One thing I don’t get. @quintendewilde Your Codepen is using Jquery is that the plan? What is supposed to happen when you click the radio inputs? What are the requirements?

You don’t need jQuery or JavaScript at all if you use label elements.

Well, that depends on what you’re trying to do. The original Codepen is alerting out a date attribute value so I assume some kind of JS is going to be used, for something.

I sorta assumed that was just for debugging purposes. @quintendewilde could you confirm what your requirements are? Do you just need checkbox-equivalent functionality or something else?

@lionel-rowe @lasjorg I’m indeed using javascript for calculating purposes.

I’m following this example http://javascript-coder.com/javascript-form/javascript-calculator-script.phtml

I’m trying out the pens now!

Thanks ahead.

In that case, I’d suggest listening to the input event of the form as a whole. Attaching individual click handlers to each checkbox/radio is inefficient, but more importantly, it will fail to account for users changing the state of the form using the keyboard.

This is beyond the scope of styling divs and hiding radio buttons, so I’ve made a new proof-of-concept pen:

So your suggestion is to skip the styling of the radios in divs and just focus on the working of it as in the example I showed here: http://javascript-coder.com/javascript-form/javascript-calculator-script.phtml

If so I’ll skip the whole layout and keep it simple. It is a shame that it’s really hard (for me…) to stylize radio inputs.

No, you can combine the ideas too. For example, if you try forking my second pen and then drop in the styled radio buttons to replace the unstyled ones, you’ll see that the JavaScript to track form state still works just the same.

If you’re having trouble conceptualizing the ideas, though, it may be better to go back to first principles. The best article I could find that covers this stuff in detail was this one:

Interneting is Hard — HTML Forms

However, it doesn’t touch on how to style radio buttons specifically. I guess fully covering both semantics and styles of forms would be too long for one article. But it’s a good jumping-off point, at least.

Thank you, that link is a very great help!

1 Like

Focusing on both the CSS and JS at the same time might not be the best approach to take. I would start with the JS as that seems to be your main focus when following the tutorial like you are. I will say without really looking too much at the tutorial code I wasn’t super impressed with it.

Here is another version, I’m not saying the code is great or anything just a different approach. I didn’t really bother to change much of the HTML/CSS and mainly just copied it from the tutorial.

1 Like