MaterializeCSS and Rails Forms elements - hidden inputs

Question

I'm using rails 7 and materializeCSS.

When I add a collection_select or check_box to the form object (form.check_box :active for example) the check box is rendered as:

Rails code:

<%= form.check_box :active %>

What am I missing?

cbrulak · Answer

I ended by solving it by adding


input[type="checkbox"] {
  display: block;
  opacity: 1;
 /* your style */
}

input[type="checkbox"]:not(:checked) {
  display: block;
  opacity: 1;
  pointer-events: auto;
 /* your style */
}

input[type="checkbox"]:checked {
  display: block;
  opacity: 1;
  pointer-events: auto;
 /* your style */
}

to application.scss

MaterializeCSS and Rails Forms elements -> hidden inputs

1 Answers