Customizing multiple-selection lists with CSS
In this series on web forms, we learned how to create and style common form controls. In the last part, we learned how to customize the standard element. As described here, the selections are available in a second version, which allows a user to select more than one option. It appears as a list, without a drop-down component:
This article will cover how to create and customize multiple-select lists as well as how to turn off elements.
Before continuing, however, you might want to refresh your memory by revisiting the previous articles in this series:
Creating a multiple selection list in CSS
From an HTML point of view, all you have to do to transform a standard item in on that allows a user to select more than one option is to add the various attribute. For customization purposes, we will wrap the in a
Here is our list of songs without any style:
General selection style in CSS
All styles we used previously to customize the standard element are still applicable here. For reference, here are these styles using Sassy CSS (SCSS):
:root { --select-border: #393939; --select-focus: #101484; --select-arrow: var(--select-border); } select { // styles reset, including removing the default dropdown arrow appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: transparent; border: none; padding: 0 1em 0 0; margin: 0; width: 100%; font-family: inherit; font-size: inherit; cursor: inherit; line-height: inherit; // Stack above custom arrow z-index: 1; // Remove focus outline outline: none; } .select { display: grid; grid-template-areas: "select"; align-items: center; position: relative; select, &::after { grid-area: select; } min-width: 15ch; max-width: 30ch; border: 1px solid var(--select-border); border-radius: 0.25em; padding: 0.25em 0.5em; font-size: 1.25rem; cursor: pointer; line-height: 1.1; // Optional styles // remove for transparency background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%); // Custom arrow &::after { content: ""; justify-self: end; width: 0.8em; height: 0.5em; background-color: var(--select-arrow); clip-path: polygon(100% 0%, 0 0%, 50% 100%); } }
We can see their effects on a multi-selection below.
Overall it looks pretty good. The only problem is that the selected options do not extend all the way to the vertical scroll bar.
So, let’s fix that now by setting the padding-right in a new rule that specifically targets multiple selections:
select[multiple] { padding-right: 0; height: 7rem; }
The height determines the number of items visible in the list at any time without scrolling. Safari will not display partial options, unlike Firefox, Chrome, and Microsoft Edge. You can see a partial option in Edge here:
Adjusting the focus border
After removing the default element using CSS appearance attribute, now we need to define the focus border ourselves. Like we did last time, we’ll be using a CSS variable for the color:
select:focus + .focus { position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; border: 2px solid var(--select-focus); border-radius: inherit; }
Now the tab up to the multi-select list shows this:
There is also a border around the first option (not added by us) so that the user can navigate through the elements using the UP and DOWN Directional keys.
Disable selections
The management of disabled selections must also fall on our shoulders. To do this, we will add the selection-disabled class at the
Using our .select-disabled class, we can modify the appearance of the selection to give it this “gray” aspect:
.select-disabled { cursor: not-allowed; background-color: #eee; background-image: linear-gradient(to top, #ddd, #eee 33%); }
When you hover the cursor over the disabled selection, it changes to an “not allowed” cursor, which is a red circle crossed by a line, much like the Ghost Busters logo.
Behind the scenes, the disabled attribute we added to The tag makes the control unresponsive to all user interactions.
You can find the demo of this tutorial on codepen.io.
Conclusion
In this episode of the Create a Web Form with HTML series, we went through the process of creating and customizing a multiple-select list and learned how to deactivate items.