Search code examples
cssjquery-select2jquery-select2-4

Select2 css element - How to remove the top line

select2 element

I've modified an input field to use select2. I can't for the life of me figure out how to remove the line at the top. The bottom line is a border-bottom that I've applied via css to the notes input element separately.

Does anyone know what CSS property, from the top of their heads is associated with it or if this is at all possible?

I am given the following css properties when selecting this element in developer tools.

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; */

Thank you for your help.

Solution

  • Try these piece of codes 

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