AngularJS+SpringBoot项目中如何为select选项编写CSS样式？

Hey there! Let's get your select styling sorted out—looks like a couple of small issues are keeping your CSS from working as expected. Here's what to fix:

First, Fix Your CSS Selector #

Your HTML uses an id="notIE" on the select element, but your CSS is targeting a class with .notIE.select. That's why your styles aren't applying! Switch to using the ID selector instead.

Clean Up Redundant HTML #

You've got a manual <option> tag inside your select that's redundant with the ng-options directive—ng-options will automatically generate all the options from your hotels array. Removing that extra option will prevent confusion and potential styling conflicts.

Updated Code Examples #

Modified HTML:

<div class=""> 
  <select style="line-height: 40px;" 
          ng-model="nameHotelSelected" 
          id="notIE" 
          class="fa fa-search" 
          ng-options="nameHotel.name for nameHotel in hotels | orderBy:'name'" 
          ng-change="changedValue(this)">
    <option value="">link this contact to ...</option>
  </select> 
</div>

Modified CSS:

<style>
/* Target the select by its ID */
#notIE {
  width: 150px;
  margin: 10px;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

#notIE:focus {
  min-width: 150px;
  width: auto;
  outline: none;
  border-color: #2196F3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

/* Style dropdown options (note: browser support varies for advanced styles) */
#notIE option {
  padding: 8px;
  color: #333;
  background-color: #fff;
}

#notIE option:hover {
  background-color: #f5f5f5;
}
</style>

A Quick Note on Native Select Limitations #

Keep in mind that native <select> elements have limited styling support across browsers—some advanced styles (like custom hover effects) might not work identically everywhere. If you need full control over the dropdown's appearance, consider using an AngularJS UI component library which lets you build fully custom dropdowns with HTML/CSS.

Give these changes a try, and your select should start picking up the styles properly!

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