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

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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.