如何样式化选择元素的弹出窗口

huangapple
go评论119阅读模式
英文:

How to style a select element's popup

问题

  1. vaadin-select-item.search-bar_popup { 
  2.     background: black;
  3.     color: white;
  4. }
英文:

I'm trying to style the Select element's popup window (the window that opens when you go to select an item).

I can correctly target the popup via the following CSS:

  1. vaadin-select-item { 
  2.     background: black;
  3.     color: white;
  4. }

The problem is that this sets the popup globally where as I only want this styling to apply to this specific element.

I've set the following class names:

  1. var droplist = new Select<SearchType>();
  2. 		droplist.addClassName("search-bar");
  3. 		droplist.setOverlayClassName("search-bar_popup");

I can target the main drop list with:

  1. vaadin-select.search-bar::part(toggle-button) {
  2. 	color: white;
  3. }

The Vaadin documentation on styles is rather limited.

But when I try to target the popup the CSS fails to target the element:

  1. vaadin-select-item.search-bar_popup { 
  2.     background: black;
  3.     color: white;
  4. }

答案1

得分: 1

.overlay-classname 应用于覆盖元素，而不是覆盖中的各个项目。项目是覆盖的常规子元素，因此使用 search-bar 作为 overlay-classname，你可以这样目标它们：

  1. /* 样式整个选择元素 */
  2. .search-bar vaadin-select  {
  3.     height: 58px;
  4.     width: 120px;
  5.     align-content: center;
  6.     flex-wrap: wrap;
  7. }
  10. /* 搜索类型下拉列表 */
  11. .search-bar vaadin-select-item  { 
  12.     background: black;
  13.     color: white;
  14. }
  16. /* 样式下拉箭头 */
  17. .search-bar vaadin-select::part(toggle-button) {
  18. 	color: white;
  19. }
  21. /* 样式弹出窗口 */
  22. .search-bar_popup vaadin-select-item {
  23. 	background: black;
  24.     color: white;
  25. }
英文:

The overlay-classname is applied to the overlay-element, not to individual items in the overlay. The items are regular child elements of the overlay, so with an overlay-classname of search-bar you would target them like so:

  1. /* style the overall select element */
  2. .search-bar vaadin-select  {
  3.     height: 58px;
  4.     width: 120px;
  5.     align-content: center;
  6.     flex-wrap: wrap;
  7. }
  10. /* search type drop list */
  11. .search-bar vaadin-select-item  { 
  12.     background: black;
  13.     color: white;
  14. }
  16. /* style the drop arrow */
  17. .search-bar vaadin-select::part(toggle-button) {
  18. 	color: white;
  19. }
  21. /* style the popup window */
  22. .search-bar_popup vaadin-select-item {
  23. 	background: black;
  24.     color: white;
  25. }

huangapple
  • 本文由 发表于 2023年7月24日 15:57:30
  • 转载请务必保留本文链接：https://go.coder-hub.com/76752422.html
  • css
  • vaadin
  • vaadin24
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定