Friday, September 15, 2023
HomeCSScss - Drifting tag history shade over side

css – Drifting tag history shade over side

I’m attempting to include a drifting tag which floats on the leading boundary of an input, and also eliminates (overlays?) the component of the boundary that it rests on.

The complying with jobs well if the within the input has the very same history shade as the outdoors (making use of Tailwind):

<< div className=" inline-flex family member align-top">>.
<< input id= {id} kind=" message" className= {inputClassname}/>>.
<< tag id= {'{$id} -tag'} htmlFor= {id} className= {labelClassname} >>.
Tag right here.

with labelClassname like (somewhat reduced with dimensions, formatted right here to simplify to align, peer-placeholder-shown reduced to peer-plc-s) - trouble right here probably originates from bg-white ...

 outright block z-[1] transition-all bg-white px-1.
text-gray-700 -top-2 left-2.
peer-focus: text-gray-700 peer-focus:- top-2 peer-focus: left-2.
peer-plc-s: text-gray-500 peer-plc-s: top-4 peer-plc-s: left-4.

and also inputClassname like:

 peer placeholder-transparent boundary px-4 pt-3 pb-1.
focus-visible: outline-none text-lg.
border-gray-400 box-border.
border-b-4 emphasis: border-b-secondaryc.

Input without any communication, tag in box (penalty).
Empty input with label in place
Input with message and also emphasis (penalty).
Input with label raised and focus
Input with a various history (right here triggered by impaired) - the history is established right here to bg-white, so currently package shows up.
Problematic disabled input with visible label box

Establishing bg-inherit or bg-transparent does not conceal the line:.
bg-inherit versions

Just how can I make a tag that occludes the leading boundary, however does not have a history which looks strange when both sides of the boundary are not the very same shade?


Most Popular

Recent Comments