Search code examples
cssdropdowncustomizationp5.js

How to customize dropdown in p5.js

I have tried giving css by using .style() method but it doesn't work. So please help me in customizing and making it look better

Solution

  • There's nothing special about the <select> elements that p5js creates. And the .style() function works fine with them. So it is not clear what you are having difficulty with:

    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>

    Browsers don't allow you to style the items list that appears when a select is expanded, so if you want to customize the appearance further you will need to do some extensive CSS and JavaScript customization. See: https://www.w3schools.com/howto/howto_custom_select.asp for example.