Integrate stylish checkbox design into a form in Rails

I discovered some beautiful css styles for checkboxes that I would like to use instead of the regular ones. You can find these styles here: .

Could someone guide me on how to implement this change?

This is the code snippet from the form:

<div class="w-64 bg-gray-300 flex justify-between">
  <%= form.label :standard, class: "inline-block" %>
  <%= form.check_box :stretch, class: 'inline-block' %>
</div>

<div class="pretty p-icon p-round p-pulse">
  <input type="checkbox" />
  <div class="state p-success">
  <label>Pretty</label>
    <i class="icon mdi mdi-check"></i>
  </div>
</div>

Below is a screenshot demonstrating the standard checkbox and the new styled one:

https://i.sstatic.net/yuf93.png

cssruby-on-railstailwind-css

Answer №1

I struggled to find a concise solution for this issue. I also aimed to ensure that the pretty checkbox maintained the same layout as the standard one, with text preceding the checkbox on the same line.

The workaround I discovered involved placing them in a table...

<table>
  <tr>
    <th class="bg-blue-100">Thing</th>
    <th><div class="text-white">blankspace</div></th>
    <th>Done?</th>
  </tr>
  <!-- TICK -->
    <td class="bg-blue inline">Stretch</td>
    <td><div class="text-white">blankspace</div></td>
    <td>
      <%= form.label :stretch, :class => 'pretty p-icon p-round p-pulse' do %>
      <%= form.check_box :stretch %>
      <div class="state p-success">
        <label></label>
        <i class="icon mdi mdi-check"></i>
      </div>
      <% end %>
    </td>
  </tr>
...
</table>

https://i.sstatic.net/qisby.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with CSS 3 gradient compatibility in Internet Explorer 8

My CSS3 gradient button is working perfectly on all browsers except for IE8. To make it work on IE8, I am utilizing CSS3 Pie. You can see the search button in action by visiting: Upon inspecting my console, I noticed an error on this line: PIE.htc, lin ...

csscss3pie

Modify th:hover in CSS to alter the background color

I currently have a table structured as follows: <table class="cedvel"> <caption> count: <%:Html.Encode(TempData["RowsCount"])%></caption> <thead> <tr&g ...

css

Using selenium in conjunction with python to click a unique button

Having trouble clicking the connect button on the "people you may know" page of LinkedIn () The HTML code for these buttons is: <a class="vcard-button bt-connect bt-primary" href="#"><span>&nbsp;</span>Connect</a> I attempted ...

pythoncssbuttonseleniumclick

Content is positioned to the left in a horizontal layout without a set width

I am currently assisting a friend with the development of her website. While I consider myself somewhat of an amateur in web design, I usually manage to overcome challenges by dedicating hours to searching for solutions online. However, this time I have no ...

htmlcss

Style the CSS elements for a specific item

I have a situation where I need to change the background image of a specific element within a CSS class without affecting others. For example, I have a class "a" with a background image that is used for multiple elements, but I only want to change the back ...

jquerycsscordova

eliminate gaps between hyperlinks using cascading style sheets

I developed a webapp for iOS which has a specific page containing a centered div with 3 buttons. Inside this div, there is a total of 460px with each link measuring as follows: the first and last are 153px while the middle one is 154px. The main issue ar ...

htmlcss

Steps for Configuring the Content Type in an ActionController::TestCase Request

I attempted to make a GET request in my TestCase like this: request.env['CONTENT_TYPE'] = 'application/json' get :index,:application_name=>"Heka" However, it is failing with an error: ActionView::MissingTemplate: Missing template ...

ruby-on-railsrubyjsonruby-on-rails-3rest

Switch up the link color when it pops up

Is there a method to change the link color to gray without encountering glitches like on my site, where it mistakenly shows "Quick Nav."? Click here to view the page with the glitch I only want this particular link to be bold and not any other links. He ...

javascripthtmlcsspopup

Ways to include additional hyperlinks in my navigation bar

I am seeking ways to enhance my CSS menu so that there is no lag when new links are added. I aim to include 8 additional links if possible. Is there a way to prevent this delay and ensure that the links align correctly? nav { display: inline-block; ...

htmlcss

rely on a fresh event starting at one

Despite my limited knowledge in javascript, I managed to create a simple js calendar that I am quite proud of. However, I have been facing a challenge for the past few days. You can view my calendar here: https://jsfiddle.net/ck3nsemz/ The issue I'm ...

javascripthtmlcss

Unrecognized files located within the same directory

My main.html file located in the templates folder also contains three additional files: date.js, daterangepicker.js, and daterangepicker.css. Despite including them in the head of the HTML as shown below: <script type="text/javascript" src="date.js"> ...

javascripthtmlcssanchor

HTML5 template design clashes with Smarty framework

I've been working with a simple pattern like this: <input type="text" pattern="[a-z]{2}" required ../> However, it never seems to be valid. The pattern doesn't seem to work as expected. I have only tested it in Firefox so far. Is there ...

regexhtmlcsssmarty

Dreamweaver constantly combines an external CSS file with locally stored CSS when running on a local server

When I used Dreamweaver CS5, XAMPP Server, and PHP files in the past, I encountered an issue. The websites within my htdocs folder seemed to be pulling a specific website's CSS file. In 'Live View,' I could see all external .css and .js file ...

javascriptphpcssserverdreamweaver

Tips for activating multiple CSS animations when scrolling

I am currently working on a project that involves multiple CSS animations. However, I am facing an issue where these animations only occur once when the page initially loads. I would like them to trigger every time the user scrolls past them, regardless of ...

javascripthtmlcsscss-animations

Only implement the CSS styles if there are multiple elements that have the same class

I have 2 cards with the class card displayed within a card-stack. There can be any number of such cards. <div class="card-stack"> <div class="clear"><button name="clear" value="Clear all" onclick=&qu ...

htmlcss

Struggling with the alignment of pictures inside a container

I utilized the Instafeed.js library to fetch the three most recent images from an Instagram account. These images are loaded into a specific div and I successfully customized their styling according to my requirements. However, the current setup is quite s ...

javascripthtmlcsswordpress

The little DIV strayed beyond the boundaries of its parent DIV

I am facing a challenge with the positioning of nested divs within my parent div. The first two are aligned correctly, but the third one is dropping down outside of the parent div on the y-axis. I have tried various solutions from StackOverflow without suc ...

htmlcss

Styling with CSS to accentuate the currently active tabs

Struggling with writing CSS to meet the following requirements after creating a tab and calling a function on click: 1. The active tab should display a blue underline color. 2. When clicking on a tab, the blue line should appear under the active tab (sim ...

htmlcssbootstrap-4tabsangular7

Step-by-step guide on preventing an item from collapsing in a Bootstrap navbar

Is there a way to exclude a specific item from the navbar collapse box when the screen size becomes small? Here is the current HTML code: <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> ...

jqueryhtmlcsstwitter-bootstrapnavbar

Ways to enable file/result downloads on a website using HTML

Could you please take a look at this repository: https://github.com/imsikka/ArtGallery I am looking to create a downloadable result using a download button. I can create the button, but I am unsure of how to make the file actually downloadable. Do I need ...

javascripthtmlcssuser-interface