admin管理员组

文章数量:1122846

I have a form which has buttons and selects (with dynamic content) and have been trying to add a css so that when i hover over the select it will change the background color and text color.

I've tried

hover-bg:
hover-color:

but neither have any impact. Any advice/suggestions?

I've also started to look at alternatives like using a dropdown but need it to show dynamic content.

I have a form which has buttons and selects (with dynamic content) and have been trying to add a css so that when i hover over the select it will change the background color and text color.

I've tried

hover-bg:
hover-color:

but neither have any impact. Any advice/suggestions?

I've also started to look at alternatives like using a dropdown but need it to show dynamic content.

  • bootstrap-5
  • bootstrap-forms
Share Improve this question edited yesterday desertnaut 60.3k31 gold badges151 silver badges177 bronze badges asked yesterday NigelNigel 111 silver badge2 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 0

Bootstrap uses css variables --bs-body-bg and --bs-body-color to set the colors of selects. There are multiple solutions to your question, but the simplest is to create a css class that changes these color variables on hover:

.form-select.hover-blue:hover {
  --bs-body-bg: aliceblue;
  --bs-body-color: blue;
}

Run the example to try

.form-select.hover-blue:hover {
  --bs-body-bg: aliceblue;
  --bs-body-color: blue;
}

.form-select.hover-yellow:hover {
  --bs-body-bg: lightyellow;
  --bs-body-color: brown;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container p-1">

  <select class="form-select hover-blue mb-1" aria-label="select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <select class="form-select hover-yellow mb-1" aria-label="select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

</div>

本文标签： bootstrap 5Bootstrap5 Selecthoverchange the background color (look similar to a button)Stack Overflow

版权声明：本文标题：bootstrap 5 - Bootstrap5 Select - hover - change the background color (look similar to a button) - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1736281527a1926345.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。