0

How can I change the border color of this. I generally got it from this answer

$(document).ready(function() {
  $("select").select2();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>


<select id="select_page" style="width:200px;" class="operator" style="border: 2px solid red;">
  <option value="">Select a Page...</option>
  <option value="alpha">alpha</option>
  <option value="beta">beta</option>
  <option value="theta">theta</option>
  <option value="omega">omega</option>
</select>
Konrad
  • 21,590
  • 4
  • 28
  • 64
jake214
  • 1
  • 3
  • Border of what? The select? – bimbo1989 Nov 15 '22 at 15:19
  • @bimbo1989 yes. – jake214 Nov 15 '22 at 15:21
  • 1
    https://select2.org/appearance – Konrad Nov 15 '22 at 15:23
  • As the documentation says, "The appearance of your Select2 controls can be customized via the standard HTML attributes". See: [MDN border-style](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) – Yogi Nov 15 '22 at 15:27
  • can also just use css `.select2 {width: 100%;} .select2-selection {border: 2px solid red;}` – Lawrence Cherone Nov 15 '22 at 15:28
  • 1
    Does this answer your question? [How to customize jquery select2 plugin - The jQuery replacement for select boxes](https://stackoverflow.com/questions/31538734/how-to-customize-jquery-select2-plugin-the-jquery-replacement-for-select-boxes) – swinn Nov 15 '22 at 15:49

1 Answers1

2

You can style elements with CSS, so if you want every select2-selection class to have a certain border-color, you can add the following:

.select2-selection {
  border-color: green; /* example */
}
Savado
  • 557
  • 1
  • 3
  • 18