jakezatecky / react-dual-listbox

A feature-rich dual listbox for React.
https://jakezatecky.github.io/react-dual-listbox/
MIT License
109 stars 59 forks source link

Regular HTML Tags instead of select #213

Closed ev3nst closed 1 year ago

ev3nst commented 1 year ago

When styling option background color when clicked on cannot be changed with css afaik.

highlight

So far i have tried the following;

select.rdl-control:focus option,
select.rdl-control:focus option:checked,
select.rdl-control:focus option:active,
select.rdl-control:focus option:visited,
select.rdl-control:focus option::selection,
select.rdl-control:focus option[selected],
select.rdl-control:focus-within option:checked,
select.rdl-control:focus-within option:active,
select.rdl-control:focus-within option:visited,
select.rdl-control:focus-within option::selection,
select.rdl-control:focus-within option[selected],
select.rdl-control:visited option,
select.rdl-control:visited option:checked,
select.rdl-control:visited option:active,
select.rdl-control:visited option:visited,
select.rdl-control:visited option::selection,
select.rdl-control:visited option[selected],
select.rdl-control:hover option:checked,
select.rdl-control:hover option:active,
select.rdl-control:hover option:visited,
select.rdl-control:hover option::selection,
select.rdl-control:hover option[selected],
select.rdl-control:active option:checked,
select.rdl-control:active option:active,
select.rdl-control:active option:visited,
select.rdl-control:active option::selection,
select.rdl-control:active option[selected],
select.rdl-control option:checked,
select.rdl-control option:checked:active,
select.rdl-control option:checked:visited,
select.rdl-control option:checked:hover,
select.rdl-control option:checked:focus,
select.rdl-control option:checked:focus-visible,
select.rdl-control option:checked:focus-within,
select.rdl-control option:visited,
select.rdl-control option:active,
select.rdl-control option:focus,
select.rdl-control option:hover,
select.rdl-control option:target,
select.rdl-control option:focus-visible,
select.rdl-control option:focus-within,
select.rdl-control option::selection {
    background-color: #000 !important;
    outline: none !important;
    box-shadow: none !important;
}

If my example is true i think it would be a lot better to have divs instead of select and option. Not only for styling but drag & drop and other features could be implemented easier i think.

jakezatecky commented 1 year ago

This is a feature request tracked in #38.

This will take a significant overhaul of a lot of the internals, but it will resolve some other standing issues related to accessibility and styling. It will not be included in the next major release, v4.0, but may find itself in v5.0.