jakezatecky/react-dual-listbox

Regular HTML Tags instead of select

ev3nst opened this issue · 1 comments

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.

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.