Unify input styles for checkbox, radio, and range

Author: lazaronixon

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Extract dual range to dual_range component
 - Add card-check to card.css
 - Flash add animation-play-state stop on hover
+- Use".input" for "checkbox, radio and range".
 
 ## 2.0.3 - 2025-08-08
 - Fix command component accessibility issues

lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css

@@ -1,16 +1,24 @@
 .input {
-  appearance: none;
-  background-color: var(--input-background, var(--color-surface));
-  block-size: var(--input-block-size, auto);
-  border: 1px solid var(--input-border-color, var(--color-border));
-  border-radius: var(--input-radius, var(--rounded-md));
-  box-shadow: var(--input-box-shadow, var(--shadow-xs));
-  font-size: var(--input-font-size, var(--text-sm));
-  inline-size: var(--input-inline-size, var(--size-full));
-  padding: var(--input-padding, .375rem .75rem);
+  &:not([type="checkbox"], [type="radio"], [type="range"]) {
+    appearance: none;
+    background-color: var(--input-background, var(--color-surface));
+    block-size: var(--input-block-size, auto);
+    border: 1px solid var(--input-border-color, var(--color-border));
+    border-radius: var(--input-radius, var(--rounded-md));
+    box-shadow: var(--input-box-shadow, var(--shadow-xs));
+    font-size: var(--input-font-size, var(--text-sm));
+    inline-size: var(--input-inline-size, var(--size-full));
+    padding: var(--input-padding, .375rem .75rem);
+  }
 
-  option {
-    padding: revert;
+  &:is([type="checkbox"], [type="radio"]) {
+    accent-color: var(--input-accent-color, var(--color-primary));
+    block-size:   var(--input-check-size, var(--size-4));
+    inline-size:  var(--input-check-size, var(--size-4));
+  }
+
+  &:is([type="range"]) {
+    accent-color: var(--input-accent-color, var(--color-primary));
   }
 
   &:is(textarea[rows="auto"]) {
@@ -29,19 +37,7 @@
   &::file-selector-button {
     font-weight: var(--font-medium);
   }
-}
-
-:is(.checkbox, .radio) {
-  accent-color: var(--input-accent-color, var(--color-primary));
-  block-size:   var(--input-check-size, var(--size-4));
-  inline-size:  var(--input-check-size, var(--size-4));
-}
-
-:is(.range) {
-  accent-color: var(--input-accent-color, var(--color-primary));
-}
 
-:is(.input, .checkbox, .radio, .range) {
   &:user-invalid {
     border-color: var(--color-negative);
   }
@@ -58,17 +54,19 @@
     cursor: not-allowed; opacity: var(--opacity-50);
   }
 
+  > option {
+    padding: revert;
+  }
+
   .field_with_errors & {
     border-color: var(--color-negative);
   }
 }
 
-.input--actor {
-  input {
-    border: 0; inline-size: 100%; outline: 0;
-  }
+.input--actor > input {
+  border: 0; inline-size: 100%; outline: 0;
+}
 
-  &:focus-within {
-    outline: var(--input-outline-size, 2px) solid var(--color-selected-dark);
-  }
+.input--actor:focus-within {
+  outline: var(--input-outline-size, 2px) solid var(--color-selected-dark);
 }

lib/generators/css_zero/scaffold/templates/_form.html.erb.tt

@@ -24,9 +24,6 @@
 <% elsif attribute.attachments? -%>
     <%%= form.label :<%= attribute.column_name %>, class: "text-sm font-medium leading-none" %>
     <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, multiple: true, class: "input" %>
-<% elsif attribute.field_type == :checkbox -%>
-    <%%= form.label :<%= attribute.column_name %>, class: "text-sm font-medium leading-none" %>
-    <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "checkbox" %>
 <% else -%>
     <%%= form.label :<%= attribute.column_name %>, class: "text-sm font-medium leading-none" %>
     <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, class: "input" %>