Question

我正在尝试仅使用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，我不会介意，因此任何帮助将不胜感激。

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？

1 个答案: