从 select 本身移除 select2 中的边框

Question

我有以下代码：

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>

我不希望 select 框出现。我想更改 select 的背景颜色并将边框设置为 none，但我的 css 不起作用。

我还尝试了以下来自 js 的方法：

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

但也没用。你能帮忙吗？

Answer 1

添加这个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>

从 select 本身移除 select2 中的边框

Remove borders in select2 from select itself

html

javascript

css