Remove borders in select2 from select itself

Issue

I have the following code:

var linha = ``; 

linha += `<tr id="5">
             <td class="text-center text-muted" style="vertical-align: middle;"><select class="select2-icon"><option class="teste" value="" data-icon="pe-2x pe-va pe-7s-user"></option>
        <option class="teste" value="United States">United States</option>
        <option class="teste" value="United Kingdom">United Kingdom</option>
        <option class="teste" value="Afghanistan">Afghanistan</option></select></td>
          </tr>`;
          
$("#daberto tbody").html(linha);

function formatText (icon) {
    return $('<span><i class="fas ' + $(icon.element).data('icon') + '"></i> ' + icon.text + '</span>');
};

$('.select2-icon').select2({
    width: "50%",
    templateSelection: formatText,
    templateResult: formatText
});
select.select2-icon{
  border: none !important;
  outline: 0px !important;
  background-color: red;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<table class="align-middle mb-0 table table-borderless table-striped table-hover daberto" id="daberto">
  <thead>
      <tr>
        <th class="text-center col-2">Destinatário</th>
      </tr>
  </thead>
  <tbody>

  </tbody>
</table>

I wanted the select box not to appear. I want to change the background color of the select and set the borders to none, but my css is not working.

I’ve also tried the following from js:

$('.select2-icon').select2({
    border: "none",
    background-color: "red"
});

but it didn’t work either. Can you help?

Solution

Add This CSS

    .select2-icon + .select2-container--default .select2-selection--single{
   border:0 !important;
   background:red !important;
}

.select2-icon + .select2-container--default .select2-selection--single .select2-selection__arrow{
  display:none
}
var linha = ``; 

linha += `<tr id="5">
             <td class="text-center text-muted" style="vertical-align: middle;"><select class="select2-icon"><option class="teste" value="" data-icon="pe-2x pe-va pe-7s-user"></option>
        <option class="teste" value="United States">United States</option>
        <option class="teste" value="United Kingdom">United Kingdom</option>
        <option class="teste" value="Afghanistan">Afghanistan</option></select></td>
          </tr>`;
          
$("#daberto tbody").html(linha);

function formatText (icon) {
    return $('<span><i class="fas ' + $(icon.element).data('icon') + '"></i> ' + icon.text + '</span>');
};

$('.select2-icon').select2({
    width: "50%",
    templateSelection: formatText,
    templateResult: formatText
});
select.select2-icon{
  border: none !important;
  outline: 0px !important;
  background-color: red;
}
.select2-icon + .select2-container--default .select2-selection--single{
 border:0 !important;
 background:red !important;
}

.select2-icon + .select2-container--default .select2-selection--single .select2-selection__arrow{
display:none
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<table class="align-middle mb-0 table table-borderless table-striped table-hover daberto" id="daberto">
  <thead>
      <tr>
        <th class="text-center col-2">Destinatário</th>
      </tr>
  </thead>
  <tbody>

  </tbody>
</table>

Answered By – Lalji Tadhani

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.