Remove borders in select2 from select itself-CodePudding

I have the following code:

var linha = ``; 

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

function formatText (icon) {
    return $('<span><i ></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/[email protected]/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<table  id="daberto">
  <thead>
      <tr>
        <th >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?

CodePudding user response：

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  style="vertical-align: middle;"><select ><option  value="" data-icon="pe-2x pe-va pe-7s-user"></option>
        <option  value="United States">United States</option>
        <option  value="United Kingdom">United Kingdom</option>
        <option  value="Afghanistan">Afghanistan</option></select></td>
          </tr>`;
          
$("#daberto tbody").html(linha);

function formatText (icon) {
    return $('<span><i ></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/[email protected]/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<table  id="daberto">
  <thead>
      <tr>
        <th >Destinatário</th>
      </tr>
  </thead>
  <tbody>

  </tbody>
</table>