Skip to content

Custom-select doesn't support single select with size attribute set above 1 #24504

Closed
@tmorehouse

Description

@tmorehouse

The size attribute controls the number of visible "rows" the select displays. It is commonly used in conjunction with the multiple attribute, but can be used on single selects to produce a "list-box" style select (except on some mobile browsers).

When used on a .custom-select, not in multiple mode, the size attribute is not respected and only single option (and bits of the next option) are shown (as well as bits of the custom select indicator):

image

As an aside note, when in multiple mode, there is also excess padding on the right (where the custom indicator would be on a single select)

Workaround CSS:

.custom-select[multiple],
.custom-select[size]:not([size="1"])
{
    height: auto;
    background-image: none;
    /* Fix for excess right padding */
    padding-right: 0.75rem;
}

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions