Use classname instead of type

varianter · Aug 29, 2024 · f2f8731 · f2f8731
1 parent 2e8228a
commit f2f8731
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
@@ -157,7 +157,7 @@
     line-height: 2.5rem;
   }
 
-  input[type="checkbox"] {
+  .checkBoxWithCustomCheckmark {
     /* Add if not using autoprefixer */
     -webkit-appearance: none;
     appearance: none;
@@ -167,13 +167,14 @@
     margin: 0;
   }
 
-  input[type="checkbox"] {
+  .checkBoxWithCustomCheckmark {
     appearance: none;
     display: grid;
     place-content: center;
   }
 
-  input[type="checkbox"]::before {
+  /*Here an svg has been converted to a clip-path, which is why that field is so long*/
+  .checkBoxWithCustomCheckmark::before {
     content: "";
     width: 12px;
     height: 12px;
@@ -244,11 +245,11 @@
     );
   }
 
-  input[type="checkbox"]:checked {
+  .checkBoxWithCustomCheckmark:checked {
     background-color: #423d89;
   }
 
-  input[type="checkbox"]:checked::before {
+  .checkBoxWithCustomCheckmark:checked::before {
     transform: scale(1);
   }
 }
diff --git a/frontend/src/components/Buttons/FilterButton.tsx b/frontend/src/components/Buttons/FilterButton.tsx
@@ -14,7 +14,7 @@ export default function FilterButton({
         disabled={inputProps.disabled}
         readOnly
         {...inputProps}
-        className={`border flex items-center border-opacity-50 m-[1px] mr-2 h-4 w-4  border-primary hover:border-primary
+        className={`checkBoxWithCustomCheckmark border flex items-center border-opacity-50 m-[1px] mr-2 h-4 w-4  border-primary hover:border-primary
           
           ${
             inputProps.checked