Search code examples
cssvue.jshoverbootstrap-vueselect-options

Vue-Bootstrap b-select option hover

I'm using Vue-Bootstrap framework, I want to rewrite the css rule for tag 'option' when you hover the element

My code is like this jsfiddle

option:hover {
  background-color: red;
}

Why the background-color in 'option:hover' change the background when is not hover event, and not when is a hover event?

Thanks!

Solution

  • b-select is a native select element once rendered. The style of the select can usually be styled to a degree, however the options are usually very limited as they're styled by the OS and not HTML/CSS.

    This is especially a thing on mobile browsers, where selects act very differently compared to a PC.

    You can try taking a look at this question for some possible solutions, however they're very limited in browser support. Change Select List Option background colour on hover