如何从 bootstrap-select 获取 :focus 和 :valid 值，如 form-control？

Question

我正在尝试在 bootstrap 选择器上添加浮动标签，只有 css。所以在我的代码中，我想用 bootstrap-select:focus 浮动标签。但问题是此行在 css 中不起作用。但是如果我使用 bootstrap-select:active，当按住鼠标时这似乎有效。

我尝试使用普通选择框应用浮动标签 form-control 并且在普通选择框中一切正常，但我希望我的选择框更实用和美观，所以我尝试使用 selectpicker。在 form-control 中，我使用 :focus & :valid 来获取选择框状态并应用浮动标签。 This is the example with form-control

这是带有 .bootstrap-select:active 的代码，可通过鼠标单击使用。

.bootstrap-select:active + .form-control-placeholder {
    color: #da3338 !important;
    transform: translate(0, -1.2em);
    font-size: 70%;
    transition: 0.2s ease-in-out;
}

This is the example with selectpicker

要点是我希望标签在选择框获得焦点时浮动，在从下拉菜单中选择有效选项时也是如此。我想用纯 css 来做到这一点，但如果我需要 js/jQuery，我不会介意，所以任何帮助将不胜感激。

Answer 1

好吧，在 google 花了几天时间后，我找到了解决方案！

css 类:

.float {
    color: #da3338 !important;
    transform: translate(0, -1.1em);
    font-size: 75%;
    transition: 0.2s ease-in-out;
}

.changefloat {
    transform: translate(0, -1.1em);
    font-size: 75%;
}

jquery:

function float (){
    $(this).parents(".form-group").children("label").addClass("float");
}
function unfloat (){
    $(this).parents(".form-group").children("label").removeClass("float");
}
function changefloat (){
    $(this).parents(".form-group").children("label").addClass("changefloat");
}

$(".selectpicker").on("show.bs.select", float);
$(".selectpicker").on("hide.bs.select", unfloat);
$(".selectpicker").on("changed.bs.select", changefloat);

Working example

如何从 bootstrap-select 获取 :focus 和 :valid 值，如 form-control？

How to get :focus & :valid value like form-control from bootstrap-select?

css

bootstrap-4

label

bootstrap-select

bootstrap-selectpicker