User Role Management Card
Efficiently manage user permissions and roles with this functional and clear interface card.
This is a core component for the "Users" or "Team Members" section of any admin panel. It displays basic user information (avatar, name, and email) alongside interactive controls for changing their role via a dropdown menu and removing them from the system.

About this Component
The card is designed to present a single user within a list. Its most notable feature is the custom-styled dropdown (select
) menu, which provides a consistent appearance across all browsers while remaining fully accessible and functional. The component is responsive, stacking neatly on smaller screens.
Features
- Custom-Styled Select Menu: Provides a consistent dropdown appearance across browsers, overriding the default operating system styles.
- Accessible Forms: Uses a semantic
label
(though visually hidden) for theselect
element to ensure it's accessible to screen readers. - Responsive Layout: The multi-column layout on desktop cleanly transitions to a stacked format on mobile to preserve readability and usability.
Code Breakdown
HTML Structure
Each card is an article
. The card is a flex container, with the main columns being a user avatar img
, a div
for the user details, and another div
for the form controls. The role selection uses a native select
element with its option
s. An important accessibility feature is the label
with a for
attribute pointing to the id
of the select menu. The label is visually hidden but available to screen readers.
CSS Styling
Creating a custom-styled dropdown requires a specific technique. We first remove the default browser styling from the select
element by using appearance: none
. This removes the default dropdown arrow. We then add our own custom arrow by setting a background-image
property on the select
element, using an inlined SVG for the arrow graphic. We also adjust the padding-right
on the select
to make sure the text doesn't run underneath our custom arrow. The rest of the card is a straightforward Flexbox layout that switches flex-direction
in a media query for smaller screens.
Code
Here's the complete code. In a live application, changes to the select menu would typically be submitted via JavaScript or a form submit button to update the user's role on the server.