From 07af0555a757fe45d67fd1e25757e12801340ab6 Mon Sep 17 00:00:00 2001 From: Karl Horky Date: Thu, 13 Jul 2023 14:32:13 +0200 Subject: [PATCH 1/4] Allow for without `type` --- src/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.js b/src/index.js index 1732b57..f627565 100644 --- a/src/index.js +++ b/src/index.js @@ -17,6 +17,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { { base: [ "[type='text']", + ":not([type])", "[type='email']", "[type='url']", "[type='password']", From 9c47fa11a8a12e5cafbede7fc9b34910c967407c Mon Sep 17 00:00:00 2001 From: Karl Horky Date: Thu, 13 Jul 2023 14:33:11 +0200 Subject: [PATCH 2/4] Remove note in readme --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index adf5f6a..56395c9 100644 --- a/README.md +++ b/README.md @@ -51,8 +51,6 @@ Currently we add basic utility-friendly form styles for the following form eleme - `select[multiple]` - `textarea` -**Note that for text inputs, you must add the `type="text"` attribute for these styles to take effect.** This is a necessary trade-off to avoid relying on the overly greedy `input` selector and unintentionally styling elements we don't have solutions for yet, like `input[type="range"]` for example. - Every element has been normalized/reset to a simple visually consistent style that is easy to customize with utilities, even elements like `` that normally need to be reset with `appearance: none` and customized using custom CSS: ```html From c67bc24e5fa0124b54285d0e8f2e9fe320fa4f49 Mon Sep 17 00:00:00 2001 From: Karl Horky Date: Thu, 13 Jul 2023 15:51:17 +0200 Subject: [PATCH 3/4] Add element to selector --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index f627565..61a4b0b 100644 --- a/src/index.js +++ b/src/index.js @@ -17,7 +17,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { { base: [ "[type='text']", - ":not([type])", + "input:not([type])", "[type='email']", "[type='url']", "[type='password']", From b6b4c5ae6067d156d6f6a7622a9d49801ac05554 Mon Sep 17 00:00:00 2001 From: Karl Horky Date: Thu, 13 Jul 2023 16:49:04 +0200 Subject: [PATCH 4/4] Use :where --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 61a4b0b..ce7e8ac 100644 --- a/src/index.js +++ b/src/index.js @@ -17,7 +17,7 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) { { base: [ "[type='text']", - "input:not([type])", + "input:where(:not([type]))", "[type='email']", "[type='url']", "[type='password']",