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).
Input with message and also emphasis (penalty).
Input with a various history (right here triggered by impaired) - the history is established right here to bg-white, so currently package shows up.
Establishing bg-inherit or bg-transparent does not conceal the line:.
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?
