Как получить: focus &: допустимое значение, такое как form-control из bootstrap-select? - PullRequest
Новая
       41

Как получить: focus &: допустимое значение, такое как form-control из bootstrap-select?

3 голосов
/ 28 марта 2019

Я пытаюсь добавить метку с плавающей точкой в ​​селекторе выбора начальной загрузки только css.Поэтому в моем коде я хочу добавить метку bootstrap-select:focus.Но проблема в том, что эта линия не работает в CSS.Но если я использую bootstrap-select:active, при удерживании мыши это, кажется, работает.

Я попробовал плавающую метку с обычным selectbox, применяя form-control, и в обычном selectbox все работает нормально, но я хочу, чтобы мой selectbox былболее функциональный и красивый, поэтому я пытаюсь использовать селектор выбора.В form-control я использовал :focus & :valid, чтобы получить состояние selectebox, и применил плавающую метку. Это пример с 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;
}

Это примерс selectpicker

Суть в том, что я хочу, чтобы метка плавала, когда фокус находится в окне выбора, а также когда в выпадающем меню выбрана действительная опция.Я хочу сделать это с чистым CSS, но если мне понадобится js / jQuery, я не возражаю, поэтому любая помощь будет оценена.

1 Ответ

0 голосов
/ 01 апреля 2019

Ну, проведя несколько дней в 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);

Рабочий пример

...