Use normal checkbox and radio appearance in forced-colors mode (#…

…152)

* Switch control appearance in `forced-colors` mode

* Update changelog

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Use normal `checkbox` and `radio` appearance in `forced-colors` mode ([#152](https://github.com/tailwindlabs/tailwindcss-forms/pull/152))
 
 ## [0.5.6] - 2023-08-28
 

src/index.js

@@ -251,6 +251,10 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) {
           'background-image': `url("${svgToDataUri(
             `<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>`
           )}")`,
+
+          '@media (forced-colors: active) ': {
+            appearance: 'auto',
+          },
         },
       },
       {
@@ -260,6 +264,10 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) {
           'background-image': `url("${svgToDataUri(
             `<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>`
           )}")`,
+
+          '@media (forced-colors: active) ': {
+            appearance: 'auto',
+          },
         },
       },
       {
@@ -292,6 +300,10 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) {
           'background-size': `100% 100%`,
           'background-position': `center`,
           'background-repeat': `no-repeat`,
+
+          '@media (forced-colors: active) ': {
+            appearance: 'auto',
+          },
         },
       },
       {