Angular ng-select 组件样式，例如带有浮动 label 的引导 v5 表单选择

Question

The issues is that library @ng-select/ng-select doesn't support boostrap 5 floating label style.

Answer 1

I've written this CSS to style the ng-select like a boostrap 5 form-select inside a floating-label, you must change colors and spacing variables to match yours if you're not using default values. I've not manager loading status or other things related to the ng-select, also the caret on the right is the default of ng-select (not of bootstrap, need to be changed)

.form-floating {
    position: relative;

    .ng-select-container {
        height: calc(3.5rem + 2px) !important;
        line-height: 1.25;
    }

    label {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; // allow textareas
        padding: 1rem 0.75rem;
        overflow: hidden;
        text-align: start;
        text-overflow: ellipsis;
        white-space: nowrap;
        pointer-events: none;
        border: 1px solid transparent; // Required for aligning label's text with the input as it affects inner box model
        transform-origin: 0 0;
        transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
    }

    .ng-select-container {
        padding-top: 1.625rem;
        padding-bottom: .625rem;

        .ng-input {
            top: unset !important;
        }
    }

    ng-select {
        ~label {
            opacity: 0.65;
            transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
            z-index: 1001;
        }


        &:focus .ng-select-container {
            border-color: #86b7fe;
            outline: 0;
            box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
        }

        &.is-valid .ng-select-container {
            border-color: #198754 !important;
        }

        &.is-valid.ng-select-focused .ng-select-container {
            box-shadow: 0 0 0 0.25rem rgb(25 135 84 / 25%);
        }

        &.is-invalid .ng-select-container {
            border-color: #dc3545 !important;

        }

        &.is-invalid.ng-select-focused .ng-select-container {
            box-shadow: 0 0 0 0.25rem rgb(220 53 69 / 25%);
        }
    }
}