how change color of border in focus input?

[ku-uhaku]

how change color of border whene i focus

default was primary

there is not class for change the color of border whene focus

<div class="relative mb-3" data-te-input-wrapper-init>
  <input
    type="text"
    class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
    id="exampleFormControlInput1"
    placeholder="Example label" />
  <label
    for="exampleFormControlInput1"
    class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
    >Example label
  </label>
</div>

[iprzybysz]

Hi, you can change it using Input class custimization.

Here is an example:

<div
  id="exampleFormControlInput1"
  class="relative mb-3"
  data-te-input-wrapper-init
  data-te-class-notch-leading-normal="border-neutral-300 dark:border-neutral-600 group-data-[te-input-focused]:border-red-500"
  data-te-class-notch-middle-normal="border-neutral-300 dark:border-neutral-600 group-data-[te-input-focused]:border-red-500"
  data-te-class-notch-trailing-normal="border-neutral-300 dark:border-neutral-600 group-data-[te-input-focused]:border-red-500"
  >
  <input
     type="text"
     class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] transition-all outline-none duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[te-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-neutral-200 dark:placeholder:text-neutral-200 dark:peer-focus:text-primary [&:not([data-te-input-placeholder-active])]:placeholder:opacity-0"
     placeholder="Select a date"
   />
  <label
     for="exampleFormControlInput1"
     class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[te-input-state-active]:-translate-y-[0.9rem] peer-data-[te-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-200 dark:peer-focus:text-primary"
     >Select a date</label
   >
</div>

[ku-uhaku]

ty it's really help

[ku-uhaku]

but if there is anther way using only class

[ku-uhaku]

it s not support dark mode

how i gote the view

[iprzybysz]

You can only change notches using class customization, there is no other way. To solve this issue, add dark:group-data-[te-input-focused]:border-t-transparent class to the data-te-class-notch-middle-normal attribute.

[ku-uhaku]

Thank you so much