Ask A Question


You’re not receiving notifications from this thread.

Tailwind Checked Radio Buttons = Change Background

Tim Dowling asked in CSS

I've been able to use Tailwind to change my radio buttons into normal buttons.

changing the background on 'hover' works, same with 'active' (on click) but there's no setting for 'checked'. Has anyone had any luck building a custom class variant for 'checked' ??


Ok, just solved my own problem. For anyone else wanting to turn radio buttons into actual buttons using CSS there's a 'focus-within' class used to target child elements. I'll probably move away from 'buttons' and use a custom card but here's a solution, just wrap it in a div within the collection block.

<%= form.collection_radio_buttons :event_type_id, EventType.all, :id, :event_type do |b| %>
div class="btn btn-primary text-white checked:bg-white focus-within:bg-white">
<%= b.radio_button class: "opacity-0" %>
<%= b.label class: "" %>

<% end %>

Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 79,047+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2023 GoRails, LLC. All rights reserved.