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•16mo ago

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

erik.gh•16mo ago

What do you mean with the BEST css?

WOLFLEADER•16mo ago

I guess reusable

Unknown User•16mo ago

Message Not Public

erik.gh•16mo 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•16mo ago

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

WOLFLEADER•16mo ago

Tom•16mo ago

i use mui for my app and it does this

Tom•16mo ago

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

React Text Field component - Material UI

Text Fields let users enter and edit text.

Tom•16mo 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•16mo ago

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

Unknown User•16mo ago

Message Not Public

WOLFLEADER•16mo ago

ah right these are the react native comps here unknown

Unknown User•16mo ago

Message Not Public

WOLFLEADER•16mo ago

but i wouldt know what background its on

Unknown User•16mo ago

Message Not Public

WOLFLEADER•16mo 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•16mo ago

Message Not Public

WOLFLEADER•16mo ago

ye fair right now i just account for 2 background types

Unknown User•16mo ago

Message Not Public

WOLFLEADER•16mo ago

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

Unknown User•16mo ago

Message Not Public

erik.gh•16mo 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•16mo 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•16mo ago

Gaming

Programming

Best CSS for this design