Select - fix changing border color (#1784)

* Select - fix changing border color

* Add note about input classes

site/content/docs/standard/forms/select/a.html

@@ -635,7 +635,17 @@ <h4 class="mb-4 font-bold">Via JavaScript</h4>
       <code>data-te-class</code>, as in
       <code>data-te-class-form-outline="relative bg-red-600"</code>
     </p>
-
+    <div
+      class="my-5 rounded-md border-l-[6px] border-solid border-primary-400 bg-primary-100 p-4 dark:border-primary-300 dark:bg-primary-300/30 ">
+      <strong>Note:</strong> To apply styling to an input element, you can
+      utilize the identical classes as those available in the
+      <a
+        href="https://tailwind-elements.com/docs/standard/forms/inputs/#docsTabsAPI"
+        target="_blank"
+        class="text-primary-700 dark:text-primary-400"
+        >Inputs API</a
+      >.
+    </div>
     <div class="flex flex-col">
       <div class="overflow-x-auto">
         <div class="inline-block min-w-full py-2">

src/js/forms/select/index.js

@@ -547,9 +547,13 @@ class Select {
       SELECTOR_FORM_OUTLINE,
       this._wrapper
     );
-    const outlineInput = new Input(inputWrapper, {
-      inputFormWhite: this._config.selectFormWhite,
-    });
+    const outlineInput = new Input(
+      inputWrapper,
+      {
+        inputFormWhite: this._config.selectFormWhite,
+      },
+      this._classes
+    );
     outlineInput.init();
     this._notch = SelectorEngine.findOne(SELECTOR_NOTCH, this._wrapper);
   }