css - 如何获得:focus & :valid value like form-control from bootstrap-select?

Question

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

我尝试使用普通选择框应用 form-control 的 float 标签，在普通选择框中一切正常，但我希望我的选择框功能更强大，更美观，所以我尝试使用选择器。在 form-control 中，我使用 :focus 和 :valid 来获取选择框状态并应用 float 标签。 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

要点是我希望标签在选择框获得焦点时 float ，在从下拉菜单中选择有效选项时也是如此。我想用纯 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%;
}

j查询:

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