Is it possible that something like this `.form-flo...

# kobweb

[Christiano]

Is it possible that something like this .form-floating>.form-select:hover~label is not supported in a CssRule?

I'm trying to create something akin to the Bootstrap floating label but this selector ~ doesn't seem to work when I add it. Even when adding it manually in the inspector-stylesheet in my browser itself, it does not seem to work. 😅

[S.]

can you show the code of your CssStyle? hard to say what's going on

[Christiano]

This is my selectFormFloating cssStyle that I re-created from the form-floating bootstrap style.

It's mainly the last part of the style, the ~ label that does not seem to work, and I'm not sure why exactly...

val SelectFormFloating = CssStyle {
    base {
        Modifier.position(Position.Relative)
    }
    cssRule("> select") {
        Modifier
            .padding {
                top(1.625.cssRem)
                bottom(.625.cssRem)
            }
            .height(calc { 2.px + 3.5.cssRem })
            .lineHeight(1.25)
    }

    cssRule("> label") {
        Modifier
            .position(Position.Absolute)
            .top(0.px)
            .left(0.px)
            .fillMaxHeight()
            .padding(1.cssRem, .75.cssRem)
            .pointerEvents(PointerEvents.None)
            .border(1.px, LineStyle.Solid, Colors.Transparent)
            .transformOrigin(TransformOrigin.of(0.px, 0.px))
            .transition(
                Transition.group(properties = listOf("opacity", "transform"), duration = 0.1.s, timingFunction = TransitionTimingFunction.EaseInOut, delay = 0.s, TransitionBehavior.Normal)
            )
    }

    cssRule("> select ~ label, > input:not(:placeholder-shown) ~ label") {
        Modifier
            .opacity(0.65)
            .transform {
                scale(0.85)
                translateY((-0.5).cssRem)
                translateX(.15.cssRem)
            }
    }
}

[Christiano]

My component looks something like this

Div {
    Label()

    Select()
}

The cssStyle above is then added to the Div container.

[Christiano]

My god... I looked into the ~ and + selectors in css and I now intently read the part where label has to follow select in the DOM tree... so now it works... 😅

[S.]

glad to hear that. but yeah chaining selectors gets complicated very quickly

[Letter]

I'm not sure that the comma is working as you intend in that selector due to the way css rules are appended to the style class. I believe you want cssRule(" :is(* > select ~ label, * > input:not(:placeholder-shown) ~ label)")