如何从bootstrap-select中获取:focus和:valid值,例如form-control?

时间:2019-03-28 15:41:24

标签: css bootstrap-4 label bootstrap-select bootstrap-selectpicker

我正在尝试仅使用CSS在引导选择器上添加一个浮动标签。因此,在我的代码中,我想使用bootstrap-select:focus来浮动标签。但是问题在于,这行代码在CSS中不起作用。但是,如果我使用bootstrap-select:active,则在握住鼠标时似乎可以使用。

我尝试了使用带有form-control的普通选择框的浮动标签,并且在普通选择框中一切正常,但是我希望我的选择框功能更强大且外观更好,所以我尝试使用selectpicker。在form-control中,我使用:focus:valid来获取selectebox状态并应用了浮动标签。 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,我不会介意,因此任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

在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