Select2 css 元素 - 如何删除顶行

Question

我修改了输入字段以使用 select2。我一辈子都想不出如何删除顶部的线。底线是我通过 css 分别应用于笔记输入元素的边框底部。

有谁知道 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; */

感谢您的帮助。

Answer 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>

Select2 css 元素 - 如何删除顶行

Select2 css element - How to remove the top line

css

jquery-select2-4

select2