Remove chevron for selects with a non-default size (#137)

* Remove chevron for selects with a non-default size

* wip

* wip

* wip

* update

* Only target `size` fix for select elements

* Swap attribute and element

They have different specificity

* Update changelog

Author: thecrypticace

CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+### Fixed
+
+- Remove chevron for selects with a non-default size ([#137](https://github.com/tailwindlabs/tailwindcss-forms/pull/137))
 
 ## [0.5.3] - 2022-09-02
 

kitchen-sink.html

@@ -102,6 +102,16 @@ <h2 class="text-2xl font-bold">Reset styles</h2>
                 <option>Option 2</option>
               </select>
             </label>
+            <label class="block">
+              <span class="text-gray-700">Select (single, with size)</span>
+              <select class="form-select block w-full mt-1" size="3">
+                <option>Option 1</option>
+                <option>Option 2</option>
+                <option>Option 3</option>
+                <option>Option 4</option>
+                <option>Option 5</option>
+              </select>
+            </label>
             <label class="block">
               <span class="text-gray-700">Select (multiple)</span>
               <select class="form-multiselect block w-full mt-1" multiple>
@@ -112,6 +122,16 @@ <h2 class="text-2xl font-bold">Reset styles</h2>
                 <option>Option 5</option>
               </select>
             </label>
+            <label class="block">
+              <span class="text-gray-700">Select (multiple, with size)</span>
+              <select class="form-multiselect block w-full mt-1" multiple size="3">
+                <option>Option 1</option>
+                <option>Option 2</option>
+                <option>Option 3</option>
+                <option>Option 4</option>
+                <option>Option 5</option>
+              </select>
+            </label>
             <label class="block">
               <span class="text-gray-700">Textarea</span>
               <textarea

src/index.js

@@ -143,8 +143,8 @@ const forms = plugin.withOptions(function (options = { strategy: undefined }) {
         },
       },
       {
-        base: ['[multiple]'],
-        class: null,
+        base: ['[multiple]', '[size]:where(select:not([size="1"]))'],
+        class: ['.form-select:where([size]:not([size="1"]))'],
         styles: {
           'background-image': 'initial',
           'background-position': 'initial',