All threads / Tailwind Checked Radio Buttons = Change Background
Ask A Question

Notifications

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: "" %>
/div>

<% end %>

Join the discussion

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

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

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

    logo Created with Sketch.

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

    © 2022 GoRails, LLC. All rights reserved.