don-esteban
commented
9 months ago Hi @FurkanSezal, I'm too lazy to give you a copy/past solution but looking shortly in my Chrome Developer Tools, I saw this on one of my Inputs.:
<label class="flex w-full h-full select-none pointer-events-none absolute left-0 font-normal !overflow-visible truncate peer-placeholder-shown:text-blue-gray-500 leading-tight peer-focus:leading-tight peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-blue-gray-500 transition-all -top-1.5 peer-placeholder-shown:text-sm text-[11px] peer-focus:text-[11px] before:content[' '] before:block before:box-border before:w-2.5 before:h-1.5 before:mt-[6.5px] before:mr-1 peer-placeholder-shown:before:border-transparent before:rounded-tl-md before:border-t peer-focus:before:border-t-2 before:border-l peer-focus:before:border-l-2 before:pointer-events-none before:transition-all peer-disabled:before:border-transparent after:content[' '] after:block after:flex-grow after:box-border after:w-2.5 after:h-1.5 after:mt-[6.5px] after:ml-1 peer-placeholder-shown:after:border-transparent after:rounded-tr-md after:border-t peer-focus:after:border-t-2 after:border-r peer-focus:after:border-r-2 after:pointer-events-none after:transition-all peer-disabled:after:border-transparent peer-placeholder-shown:leading-[3.75] text-gray-500 peer-focus:text-gray-900 before:border-blue-gray-200 peer-focus:before:!border-gray-900 after:border-blue-gray-200 peer-focus:after:!border-gray-900">Anzahl </label>
The <label> is responsible for this upper part of the border. I changed some peer-focus:.... utilities in the Dev Tools and could change the appearance of the border part. If You carefully do the same in the Dev Tools, you probably can solve your task.
For example add peer-focus:before:!border-**red**-500 to the labelProps className and you get a red upper border left from the label text.
Good luck.
I am trying to get rid of border when i focus to input but i still have top border. My main goal changing that focus color to custom color. But when i change to focus color i still have that top border as blue.
<Input variant='outlined' label='Static' containerProps={{ className: '!min-w-[0px] !w-[200px] mt-2 dark:text-white !dark:focus:border-white border-none focus:ring-0', }} className='focus:border-blue-gray-200' labelProps={{ className: 'before:border-0 peer-focus:border-transparent' }} />