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?

WOLFLEADER•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

WOLFLEADER•2y ago

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

WOLFLEADER•2y ago