如何获得：focus＆：有效值，如来自bootstrap-select的表单控件？

Question

我试图在bootstrap selectpicker上添加一个只有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

好吧，在谷歌度过了几天后，我已经找到了解决方案！

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