Can we make a floating label with a custom css border

Ionic Framework Ionic React
1

Trying to make something like this:

image
image810×218 7.84 KB

is there any way to modify what ionic floating label gives us to create a border around the floating label?

2

the closest i was able to get was

ion-item.item-has-focus {
    ion-label.label-floating {
        padding: 0px 5px;
        margin-top: -22px;
        background: var(--ion-color-light);
        color: var(--ion-color-danger);
        position: fixed;
    }
}

just have the background property here match the parent background color and the color property to match the border
looks like you have a different background color than input background color, so you may want to try a linear gradient instead of a single color background

2 Likes