Best CSS for this design
What would people say the best CSS for the following would be
26 Replies
currently i have
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)
I'd try to set the labels background to
inherit
.What do you mean with the BEST css?
I guess reusable
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
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
this doesnt fix the issue though
the border is still behind the text when i do this
i use mui for my app and it does this
React Text Field component - Material UI
Text Fields let users enter and edit text.
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
Inherit only works, if any parent has a background color. It'll grab the value from there
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
ah right
these are the react native comps here
unknown
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
but i wouldt know what background its on
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
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•2y ago
Message Not Public
Sign In & Join Server To View
ye fair
right now i just account for 2 background types
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
yea not ideal tho, would be nice to be able to support any bg
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
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
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