如何在Laravel表单中仅为特定下拉选择框应用样式表？

Hey there! Let's get that #complaintSource select box styled correctly with Bootstrap Select. I noticed a few issues in your current code that are preventing it from working as expected—let's break this down and fix it up:

Key Issues in Your Current Code #

• @import placement is invalid: You can't nest @import statements inside a CSS selector (like select#complaintSource). These imports need to go at the very top of your <style> tag, outside any rule sets.
• Duplicate & out-of-order CSS imports: You're loading Bootstrap CSS twice (once via @import, once via <link>) and loading Bootstrap Select before Bootstrap itself. Bootstrap Select depends on Bootstrap's base styles, so Bootstrap must load first.
• Missing JavaScript dependencies: Bootstrap Select requires Bootstrap's JS (for dropdown functionality) and its own JS file to initialize properly—without these, the styled select won't work as intended.

Correct Implementation #

First, clean up your CSS imports and make sure they're in the right order. We'll use <link> tags instead of @import (they load faster):

<!-- Load Bootstrap CSS first (required dependency) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Then load Bootstrap Select CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.6.3/dist/css/bootstrap-select.min.css" rel="stylesheet">

Next, your select box markup—make sure it has the selectpicker class (this is what Bootstrap Select uses to target elements for styling):

<select id="complaintSource" class="selectpicker">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

Then add the required JavaScript files (again, Bootstrap JS first, then Bootstrap Select JS):

<!-- Bootstrap JS (depends on jQuery) -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.2.0/dist/js/bootstrap.min.js"></script>
<!-- Bootstrap Select JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.6.3/dist/js/bootstrap-select.min.js"></script>

If You Only Want This Style on #complaintSource #

If you don't want Bootstrap Select to apply to all select boxes, you can initialize it specifically for your target element with JavaScript instead of using the selectpicker class:

<select id="complaintSource">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<script>
  // Initialize only the #complaintSource select
  $('#complaintSource').selectpicker();
</script>

Extra Custom Styling (Optional) #

If you want to add additional custom styles just for #complaintSource, you can add a separate CSS rule after the imports:

/* Custom styles for only your target select box */
#complaintSource.bootstrap-select {
  /* Your custom styles here, e.g.: */
  width: 200px;
  margin-bottom: 10px;
}

That should get your select box looking and working exactly how you want it!

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