时间戳

首页 > 解决方案 > 带有 selectize.js 的浮动标签

css - 带有 selectize.js 的浮动标签

问题描述

我在 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 {...

但我无法解决这个问题。

有谁知道如何做到这一点？

标签： cssselectize.js

解决方案

不要使用 ":focus-within" 因为这个 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; }

推荐阅读