我已修改输入字段以使用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; */
感谢您的帮助。
答案 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>