Блог

Главная - Вопросы по программированию - Как получить: фокус

Как получить: фокус

#css #bootstrap-4 #label #bootstrap-select #bootstrap-selectpicker

#css #bootstrap-4 #метка #bootstrap-select #bootstrap-selectpicker

Вопрос:

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

Я попробовал плавающую метку с применением обычного поля выбора form-control и в обычном поле выбора все работает нормально, но я хочу, чтобы мое поле выбора было более функциональным и красивым, поэтому я пытаюсь использовать selectpicker. В form-control я использовал :focus amp; :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. Я бы рекомендовал заглянуть в JavaScript или jQuery. Если бы вы выделили класс :active в отдельный класс для метки, вы могли бы переключаться между ними, когда пользователь нажимает на выбор. Проверьте toggleClass в jQuery

2. @CallumR После прочтения документации toggleClass я попытался переключаться между классами, но, как следует из названия, он будет переключаться при каждом нажатии (я не знаю, пропустил ли я что-то). На самом деле я хочу, чтобы метка плавала только тогда, когда кто-то нажимает один раз на кнопку, и после этого она будет оставаться плавающей до тех пор, пока фокус не уйдет с кнопки или кнопке не будет присвоено какое-либо допустимое значение. Я надеюсь, вы понимаете мою точку зрения.

3. А, ладно, я об этом не подумал. Вы могли бы попробовать оператор if перед переключением, который проверяет, имеет ли select значение? Итак var selectValue = $("#selectID").val() , а затем if (!selectValue) { this means that there is no value/the select is empty so do your toggle function}

4. Хмм, тоже пробовал этот способ, но я думаю, что $("#selectID").val() не может получить допустимое значение, поскольку метка с плавающей точкой все еще переключается после того, как в поле выбора присутствует значение. Я не уверен, но я думаю, что у bootstrap-selectpicker есть другой способ получения значения.

Ответ №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);

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