Comments (1)
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.
from material-tailwind.
Related Issues (20)
- Failed prop type: The prop `dismiss.isRequired` is marked as required in `MaterialTailwind.MenuCore`, but its value is `undefined`.
- "{ children: Element; className: string; key: any; } attribute "placeholder" is missing in "placeholder" HOT 1
- When Textarea has required attribute no red asterisk is show unlike in Input
- checkboxes do not affect the alignment of flexbox items
- Select component malfunctions when only one option is available
- Components requesting placeholder prop after the latest update HOT 2
- Switch style not correct HOT 1
- Carousel show out-of-index item after removing last item HOT 1
- Hex Color in Button HOT 1
- build project HOT 1
- Misspelled word in the page's footer HOT 3
- did you have more example?
- Default export errors
- Custom colors in Typescript projects cause constant log errors HOT 1
- Does not getting value from Select Option component like html core select option in form HOT 2
- How to disable animation for Accordion?
- WEBSITE UI NOT RESPONSIVE. DEFAULT SCREEN UI BROKEN
- For a Select component with the outlined variant, the outline has a break in it when there is no label HOT 2
- Property 'placeholder' is missing in IconButton HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-tailwind.