Плавающая этикетка с selectize.js - PullRequest
Новая
       25

Плавающая этикетка с selectize.js

0 голосов
/ 23 сентября 2019

У меня проблемы с CSS.То, что я пытаюсь сделать, это добавить плавающую метку, такую ​​как дизайн материала (я полагаю) с множественным выбором ввода, используя selectize.js: 

.selectize-control {
.selectize-input{
    border: none;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent;
    border: none;
    border-radius: 0 !important;
    box-shadow: none !important;

    display: block !important;
    width: 100% !important;
    height: 43px !important;
    font-size: 15px !important;
    background: none !important;
    font-family: "Novecento Normal" !important;
}
border-bottom: 2px solid #e3e6f0 !important;
&:focus-within {
    border-bottom: 2px solid #7a2932 !important;
    & + span {
        transform: translateY(-25px) scale(1) !important;
        color: #7a2932 !important;
        & + .border {
            transform: scaleX(1) !important;
        }
    }
  }
}

Как показано на этом JSFiddle .

Проблема в том, что при потере фокуса метка преобразуется обратно, даже если на входе есть значения.

Я почти уверен, что проблема в 

&:focus-within {...

Но я не могу решить это.

Кто-нибудь знает, как это сделать?

Ответы [ 2 ]

1 голос
/ 23 сентября 2019

Не используйте ": focus-inside", потому что этот css не поддерживает Internet Explorer и граничные браузеры.пожалуйста, просмотрите ссылку ниже: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

$(function() {
    $('#select-name').selectize({
        plugins: ['remove_button']
    });
    // Add this js
    $('.selectize-control').on("blur", ".selectize-input", function () {
      if($(this).hasClass("has-items")){
        $('.selectize-control').next("span").addClass("active");
      }else{
        $('.selectize-control').next("span").removeClass("active");
      }
    });
});

используйте CSS, как это 

.selectize-control + span.active{ transform: translateY(-25px) scale(1) !important; color: #7a2932 !important; }
0 голосов
/ 24 сентября 2019

Спасибо, Vipin, но я заставил его работать так: codepen 

(function($el) {
var $label = $el.prev();
$el.selectize({
  plugins: ['remove_button'],
  onFocus: function() {
    $label.addClass('fp-floating-label--focused');
  },
  onBlur: function() {
    $label.removeClass('fp-floating-label--focused');
  },
  onItemAdd: function(){
    $label.addClass('fp-floating-label--valued');
  },
  onDelete: function(){
    var count = $el.find('option').length
    if (count <= 1){
      $label.removeClass('fp-floating-label--valued');
      $(this).focus();
      $label.removeClass('fp-floating-label--focused');
    }
  },
  onChange: function(value) {
    value = value.trim();
    if (value) {
      $label.addClass('fp-floating-label--valued');
    } else {
      $label.removeClass('fp-floating-label--valued');
    }
  }
});
...