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 38,558+ 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.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.