如何在 p5.js 中自定义下拉菜单

Question

我试过使用 .style() 方法给出 css 但它不起作用。所以请帮我定制并让它看起来更好

Answer 1

p5js 创建的 <select> 元素没有什么特别之处。 .style() 函数与它们配合得很好。所以不清楚你有什么困难：

let sel;

function setup() {
  noCanvas();
  sel = createSelect();
  sel.position(10, 10);
  sel.option('foo');
  sel.option('bar');
  sel.option('baz');
  sel.style('background-color', 'orange');
  sel.style('border-radius', '3px');
  sel.style('width', '200px');
  sel.style('padding', '0.5em');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

浏览器不允许您设置 select 展开时出现的项目列表的样式，因此如果您想进一步自定义外观，您需要做一些广泛的 CSS 和JavaScript 自定义。请参见：https://www.w3schools.com/howto/howto_custom_select.asp 例如。

如何在 p5.js 中自定义下拉菜单

How to customize dropdown in p5.js

css

customization

p5.js

dropdown