The Selectmenu Element Is No More…Long Live Select!

select {
  &, &::picker(select) {
    appearance: base-select;
  }
  
  &::picker(select) {
    transition: 
      display allow-discrete 1s, 
      opacity 1s, 
      overlay 1s allow-discrete
    ;
  }
  
  &:not(:open)::picker(select) {
    opacity: 0;
  }
  
  &:open::picker(select) {
    opacity: 1;
    
    @starting-style {
      opacity: 0;
    }
  }
}

I see that ::picker(select) That’s the trigger for everything. Taking a quick look at Una’s post, I see that there are more options to choose something different Parts including:

• (the current selection)
• (which now accepts HTML between tags!)
  • option::before
  • option:checked (a little confusion here with the selected option)
• (the little chevron arrow marker thing)

So maybe Chrome is more of a fan of extending native

with additional CSS functionality to select the existing parts instead of continuing with an entirely new element. This is cool because one of Una’s demos shows how we still get the default setting Behavior even if a browser does not support the new selectors.

Direct link →

[ad_2]

Source link

Posted in Technology by kashinaat07@gmail.comTags: ElementLiveMoreâLongSelectSelectmenu

Share:

Write a comment Cancel Reply