Select2 css元素 - 如何删除顶行

时间:2017-03-17 08:30:59

标签: css css3 select2 jquery-select2-4

select2 element

我已修改输入字段以使用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; */

感谢您的帮助。

1 个答案:

答案 0 :(得分:2)

尝试这些代码

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

相关问题