Interactive and responsive component with months

Question

Hi I have to make something like this:

I think it is a simple thing, but I have a question.

• Should I do it by "select" in HTML or like a list?

When I click on the "month" the list will appear and I chose a month and the list will disappear. And it must look's like this one on the picture.

Answer 1

As you want a special styling, I would suggest to use a jquery plugin which generates the select box as HTML. This gives you best styling possibilities - just by overwriting the CSS of the plugin.

One of these might be working for you:

• https://silviomoreto.github.io/bootstrap-select/examples/
• https://select2.github.io/

You can also try CSS-only solutions like this one:

• How to style a <select> dropdown with CSS only without JavaScript?

If the CSS-only solution will work for you mainly depends on your browser compatibility requirements.