【问题标题】:Select2 css element - How to remove the top lineSelect2 css元素 - 如何删除顶行
【发布时间】:2017-08-08 17:19:45
【问题描述】:

我已修改输入字段以使用 select2。我一生无法弄清楚如何删除顶部的线。底线是我通过 css 分别应用到 notes 输入元素的边框底部。

有谁知道什么 CSS 属性与其相关联,或者这是否可能?

在开发者工具中选择这个元素时,我得到了以下 css 属性。

select2.css:388
.select2-container-multi .select2-choices .select2-search-field input {
color: #666;
    /* background: 0 0!important; */
    font-family: sans-serif;
    /* font-size: 100%; */
    height: 15px;
    padding: 5px;
    margin: 1px 0;
    outline: 0;
    border: 0 !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none;
    -o-box-shadow: none;
    /* box-shadow: none; */

感谢您的帮助。

【问题讨论】:

    标签: css select2 jquery-select2-4


    【解决方案1】:

    试试这些代码

    .select2-container--default .select2-selection--multiple{
       border-radius: 0;
       border: 0;
       border-bottom: 1px solid #ccc;
    }
    .select2-container--default.select2-container--focus .select2-selection--multiple {
       border: 0;
       border-bottom: 1px solid #333;
    }
    

    $('#example').select2({
        placeholder: 'Select a month'
    });
    .select2-container.select2-container--default .select2-selection--multiple{
       border-radius: 0;
       border: 0;
       border-bottom: 1px solid #ccc;
    }
    .select2-container.select2-container--default.select2-container--focus .select2-selection--multiple {
       border: 0;
       border-bottom: 1px solid #333;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet"/>
    <script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
    <select id="example" multiple="multiple" style="width: 300px">
        <option value="JAN">January</option>
        <option value="FEB">February</option>
        <option value="MAR">March</option>
        <option value="APR">April</option>
        <option value="MAY">May</option>
        <option value="JUN">June</option>
        <option value="JUL">July</option>
        <option value="AUG">August</option>
        <option value="SEP">September</option>
        <option value="OCT">October</option>
        <option value="NOV">November</option>
        <option value="DEC">December</option>
    </select>

    【讨论】:

    • 很高兴我能帮上忙
    猜你喜欢
    • 1970-01-01
    • 2015-03-28
    • 2011-07-01
    • 1970-01-01
    • 1970-01-01
    • 2012-10-04
    • 1970-01-01
    • 2021-10-28
    • 2022-09-30
    相关资源
    最近更新 更多