Remove borders in select2 from select itself

Question

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?

Answer 1

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>