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