同一页面自定义两款不同样式Select2组件的技术咨询

Hey there! Let's get those Select2 components styled exactly how you want them. Since Select2 renders its own HTML wrapper around your original <select> elements, we'll need to target those generated elements using CSS alongside your element IDs to apply the custom styles.

Here's the step-by-step solution: #

1. Add custom CSS rules to target each Select2 instance specifically. We'll use adjacent sibling selectors (+) to target the Select2 container that gets added right after your original <select> element.
2. Apply your desired styles:
   • For #example1: Set 18px font size and remove all borders (including the focus state border).
   • For #example2: Set 15px font size.

Updated Full Code #

Here's your modified code with the custom CSS included:

<html>
<head>
<title>Using Select2</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Select2 CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">

<!-- Custom Select2 Styles -->
<style>
/* Style for example1: 18px font, no border */
#example1 + .select2-container .select2-selection {
    font-size: 18px;
    border: none;
}

/* Remove focus border for example1 */
#example1 + .select2-container .select2-selection:focus {
    outline: none;
    box-shadow: none;
}

/* Style for example2: 15px font */
#example2 + .select2-container .select2-selection {
    font-size: 15px;
}
</style>
</head>
<body>
<br>
<br>
<div class="container">
<div class="col-md-6">
<label>I want font size 18 and no border</label>
<select id="example1" class="select2">
<option>Java</option>
<option>Javascript</option>
<option>PHP</option>
<option>Visual Basic</option>
</select>
</div>
<br>
<br>
<div class="col-md-6">
<label>I want font size 15</label>
<select id="example2" class="select2">
<option>Java</option>
<option>Javascript</option>
<option>PHP</option>
<option>Visual Basic</option>
</select>
</div>
</div>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Select2 -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.full.min.js'></script>

<script>
$("#example1").select2({ placeholder: "", selectOnClose: true });
$("#example2").select2({ placeholder: "", selectOnClose: true });
</script>
</body>
</html>

How this works: #

• #example1 + .select2-container: Targets the Select2 container element that's immediately adjacent to your #example1 select.
• .select2-selection: This is the main visible element of the Select2 component where the selected option is displayed, so we apply font size and border styles here.
• For the focus state, we override the default outline and box-shadow to make sure no border appears when #example1 is focused.

This will give you exactly the custom styles you need for each Select2 instance on the same page.

内容的提问来源于stack exchange，提问作者Raffe