Best CSS for this design

What would people say the best CSS for the following would be
26 Replies
WOLFLEADER
WOLFLEADER2y ago
currently i have
<View className="mt-6 w-full rounded-full border border-stone-300 px-2">
<Text
className="absolute -mt-2.5 ml-6 bg-white text-xs text-accent-900"
style={{ fontFamily: "Jakarta_Regular" }}
>
{props.title}
</Text>
<View className="items-center justify-center">
<TextInput
className="-mt-2.5 h-16 w-11/12 justify-self-center text-base"
style={{ fontFamily: "Jakarta_Medium" }}
{...props}
/>
</View>
</View>
<View className="mt-6 w-full rounded-full border border-stone-300 px-2">
<Text
className="absolute -mt-2.5 ml-6 bg-white text-xs text-accent-900"
style={{ fontFamily: "Jakarta_Regular" }}
>
{props.title}
</Text>
<View className="items-center justify-center">
<TextInput
className="-mt-2.5 h-16 w-11/12 justify-self-center text-base"
style={{ fontFamily: "Jakarta_Medium" }}
{...props}
/>
</View>
</View>
which looks good BUT doesnt allow for the title to be behind different colors (right now its forced to white, which looks weird on non-white backgrounds)
FluX
FluX2y ago
I'd try to set the labels background to inherit.
erik.gh
erik.gh2y ago
What do you mean with the BEST css?
WOLFLEADER
WOLFLEADER2y ago
I guess reusable
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
erik.gh
erik.gh2y ago
i think he wants to reuse that input field on pages with other background colors. the label needs to have the same bg color as the page so it cuts through the border. as fluxium said inherit will do the trick
WOLFLEADER
WOLFLEADER2y ago
this doesnt fix the issue though the border is still behind the text when i do this
WOLFLEADER
WOLFLEADER2y ago
Tom
Tom2y ago
i use mui for my app and it does this
Tom
Tom2y ago
even if you dont decide to use mui (which is a completely valid decision) you can look at how they do it in their css by inspecting the page
FluX
FluX2y ago
Inherit only works, if any parent has a background color. It'll grab the value from there
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
WOLFLEADER
WOLFLEADER2y ago
ah right these are the react native comps here unknown
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
WOLFLEADER
WOLFLEADER2y ago
but i wouldt know what background its on
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
WOLFLEADER
WOLFLEADER2y ago
well the textfield could be on any background for example the parent view of the componnt could be red for example or white
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
WOLFLEADER
WOLFLEADER2y ago
ye fair right now i just account for 2 background types
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
WOLFLEADER
WOLFLEADER2y ago
yea not ideal tho, would be nice to be able to support any bg
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
erik.gh
erik.gh2y ago
you can but you would have to set bg to inherit on all parents then it works not sure if thats what you want to do tho
Abuzeid
Abuzeid2y ago
the easiest way in my opinion is passing the background color to the element either using a prop or css variables or any other methods the other way is using before and after element to create the borders on the right and left side, It is not a perfect and you would need to change their styling when focused, here is the code
<div className="flex w-full ">
<div
className={`relative mx-auto my-6 rounded-full border-2 border-red-600 border-t-transparent text-gray-900

before:-right-0.5 before:w-1/2 before:rounded-l-none before:border-l-0

after:-left-0.5 after:w-[10%] after:rounded-r-none after:border-r-0
${beforeAndAfterClasses}`}
>
<input
type="text"
placeholder="Craypot 01"
className=" rounded-full bg-transparent px-4 py-2"
/>
</div>
</div>

const beforeAndAfterClasses = [
"box-content",
"absolute",
"h-full",
"-top-0.5",
"border-2",
"border-transparent",
"border-t-red-600",
"rounded-full",
]
<div className="flex w-full ">
<div
className={`relative mx-auto my-6 rounded-full border-2 border-red-600 border-t-transparent text-gray-900

before:-right-0.5 before:w-1/2 before:rounded-l-none before:border-l-0

after:-left-0.5 after:w-[10%] after:rounded-r-none after:border-r-0
${beforeAndAfterClasses}`}
>
<input
type="text"
placeholder="Craypot 01"
className=" rounded-full bg-transparent px-4 py-2"
/>
</div>
</div>

const beforeAndAfterClasses = [
"box-content",
"absolute",
"h-full",
"-top-0.5",
"border-2",
"border-transparent",
"border-t-red-600",
"rounded-full",
]
Abuzeid
Abuzeid2y ago
Want results from more Discord servers?
Add your server