Change background color of clicked option in duallistbox

Question

Im using bootstrap-duallistbox

Currently, when users click an option from either box, the option background turns blue for a second then the option is moved to the ot

Answer 1

For option contained in simple select I found this solution (not working with Firefox 79.0 )

select:focus > option:checked {
  background: #red !important;
  color: #fff !important;
}

But for option contained in select with 'multiple' option - - I have to use box-shadow property:

option:checked {
  box-shadow: 0 0 10px 100px red inset;
  color: #fff !important;
}

Additionally I was able to achieve control on :hover property in multiple select:

option:hover {
  box-shadow: 0 0 10px 100px red inset;
  color: #fff !important;
}

Unfortunately I don't know how to achieve the same behavior in simple select property.

I tested it on:

Chrome 84.0.4147.135

Firefox 79.0

Microsoft Edge 85.0.564.44

0 讨论(0)

查看其它3个回答

发布评论: