diff --git a/CHANGELOG.md b/CHANGELOG.md
index d70f9a0..040a313 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/index.js b/src/index.js
index 04a3992..dd2953f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -251,6 +251,10 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) {
'background-image': `url("${svgToDataUri(
``
)}")`,
+
+ '@media (forced-colors: active) ': {
+ appearance: 'auto',
+ },
},
},
{
@@ -260,6 +264,10 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) {
'background-image': `url("${svgToDataUri(
``
)}")`,
+
+ '@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',
+ },
},
},
{