include text inputs with no type specified

README.md

@@ -39,6 +39,7 @@ All of the basic form elements you use will now have some simple default styles
 
 Currently we add basic utility-friendly form styles for the following form element types:
 
+- `input` (with no type specified)
 - `input[type='text']`
 - `input[type='password']`
 - `input[type='email']`
@@ -57,8 +58,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 `<select>` or `<input type="checkbox">` that normally need to be reset with `appearance: none` and customized using custom CSS:
 
 ```html

index.html

@@ -32,7 +32,7 @@ <h2 class="text-2xl font-bold">Unstyled</h2>
             <div class="grid grid-cols-1 gap-6">
               <label class="block">
                 <span class="text-gray-700">Full name</span>
-                <input type="text" class="mt-1 block w-full" placeholder="" />
+                <input class="mt-1 block w-full" placeholder="" />
               </label>
               <label class="block">
                 <span class="text-gray-700">Email address</span>
@@ -75,7 +75,6 @@ <h2 class="text-2xl font-bold">Simple</h2>
               <label class="block">
                 <span class="text-gray-700">Full name</span>
                 <input
-                  type="text"
                   class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                   placeholder=""
                 />
@@ -137,7 +136,6 @@ <h2 class="text-2xl font-bold">Underline</h2>
               <label class="block">
                 <span class="text-gray-700">Full name</span>
                 <input
-                  type="text"
                   class="mt-0 block w-full px-0.5 border-0 border-b-2 border-gray-200 focus:ring-0 focus:border-black"
                   placeholder=""
                 />
@@ -198,7 +196,6 @@ <h2 class="text-2xl font-bold">Solid</h2>
               <label class="block">
                 <span class="text-gray-700">Full name</span>
                 <input
-                  type="text"
                   class="mt-1 block w-full rounded-md bg-gray-100 border-transparent focus:border-gray-500 focus:bg-white focus:ring-0"
                   placeholder=""
                 />

kitchen-sink.html

@@ -21,7 +21,6 @@ <h2 class="text-2xl font-bold">Reset styles</h2>
             <label class="block">
               <span class="text-gray-700">Input (text)</span>
               <input
-                type="text"
                 class="form-input mt-1 block w-full"
                 placeholder="john@example.com"
               />

src/index.js

@@ -11,6 +11,7 @@ const forms = plugin.withOptions(function (options = { strategy: 'base' }) {
     const rules = [
       {
         base: [
+          "input:where(:not([type]))",
           "[type='text']",
           "[type='email']",
           "[type='url']",