如何从bootstrap-select获取:焦点&：像form-control这样的有效值？

Question

我试图添加一个浮动标签在引导选择器上只有css。因此，在我的代码中，我希望使用bootstrap-select:focus浮动标签。但问题是这一行在css中不起作用。但是如果我使用bootstrap-select:active，当我按住鼠标的时候，这似乎是可行的。

我尝试了浮动标签和普通选择框应用form-control，在普通选择框中一切正常，但我希望我的选择框更实用和美观，所以我尝试使用选择器。在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

好吧，在谷歌呆了几天之后，我找到了一个解决方案！

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