Best CSS for this design

What would people say the best CSS for the following would be

26 Replies

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•2y ago

I'd try to set the labels background to inherit.

erik.gh•2y ago

What do you mean with the BEST css?

WOLFLEADEROP•2y ago

I guess reusable

Unknown User•2y ago

Message Not Public

erik.gh•2y 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

WOLFLEADEROP•2y ago

this doesnt fix the issue though the border is still behind the text when i do this

WOLFLEADEROP•2y ago

Tom•2y ago

i use mui for my app and it does this

Tom•2y ago

https://mui.com/material-ui/react-text-field/

React Text Field component - Material UI

Text Fields let users enter and edit text.

Tom•2y 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•2y ago

Inherit only works, if any parent has a background color. It'll grab the value from there

Unknown User•2y ago

Message Not Public

WOLFLEADEROP•2y ago

ah right these are the react native comps here unknown

Unknown User•2y ago

Message Not Public

WOLFLEADEROP•2y ago

but i wouldt know what background its on

Unknown User•2y ago

Message Not Public

WOLFLEADEROP•2y 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•2y ago

Message Not Public

WOLFLEADEROP•2y ago

ye fair right now i just account for 2 background types

Unknown User•2y ago

Message Not Public

WOLFLEADEROP•2y ago

yea not ideal tho, would be nice to be able to support any bg

Unknown User•2y ago

Message Not Public

erik.gh•2y 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•2y 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•2y ago

Gaming

Programming

Best CSS for this design