Home > Others > Advanced Form Control Styling With Selectmenu And Anchoring API

Advanced Form Control Styling With Selectmenu And Anchoring API

No doubt you’ve had to style a menu before. And when you do, you often have had to reach far down in your CSS arsenal of tricks or rely on JavaScript to get anything near the level of customization you want. It’s a long-running headache in the front-end world.

Well, thanks to the efforts of the Open UI community, we have a new element to look forward to, and its purpose is to provide CSS styling affordances to selection menus in ways we’ve never had before.

We’re going to demonstrate an initial implementation of in this article. But we’ll throw in a couple of twists while we’re at it. What we’re making is a radial select menu, something we could never have done with CSS alone. And since we’re working with experimental tech, we’re going to toss in more experimental features along the way, including images, the HTML Popover API, and the CSS Anchor Positioning API. The result is going to wind up like this:

  • : This is the selector itself. It holds the button and listbox of menu options.
  • button: This part toggles the visibility of the listbox between open and close.
  • selected-value: This displays the value of the menu option that is currently selected. So, if you have a listbox with three options and the second option is selected, the second option is what matches the part.
  • marker: Dropdown menus usually have some sort of downward-facing arrow icon to indicate that the menu can be expanded. This is that part of the menu.
  • listbox: This is the wrapper that contains the options and any elements that group certain options together inside the listbox.
  • : We already let the cat out of the bag on this one, but this part groups options together. It includes a label for the group.
  • : A value that the user is able to select in the menu. There can be one, but it’s much more common to see a — and, by extension — a with multiple options.

The other way is to slot the content ourselves in HTML. This can be a nice approach since it allows us to customize the markup any way we like. In other words, we can replace any of the parts we want, and the browser will use our markup instead of the implicit structure. In fact, this is the approach we’ll use in the radial menu we’re making.

The way to replace parts in the HTML is to use the slots. The markup we use for a slot lives in a separate tree in the Shadow DOM, replacing the contents of the DOM with what we specify in the Shadow DOM.

Here’s an abbreviated example in HTML. Notice how the

Categories: Others Tags:
  1. No comments yet.
You must be logged in to post a comment.