Styling the menuSelect widget

[mikebhart]

I'm customizing the menuSelect widget. I'm having trouble styling the dropdown, the trouble is I cant see the classes used for the dropdown. Can you supply with the css code to access the dropdown css class items so I can style it.

[Haroenv]

the css class names are documented here: https://www.algolia.com/doc/api-reference/widgets/menu-select/js/#widget-param-cssclasses

and the html output is here: https://www.algolia.com/doc/api-reference/widgets/menu-select/js/#html-output

[mikebhart]

I cant access the classes via chrome inspector. The references don't give me any guidance with regards to customizing the css code. There must be an example out there somewhere that shows examples of these widgets styled differently to the default.

[Haroenv]

Why can't you access the classes?

[mikebhart]

chrome wont let me.

[Haroenv]

Are you talking about the <option> elements? Those aren't style able by the browser, since this is a regular <select> element.

I can inspect a menuselect perfectly fine, e.g. here https://instantsearchjs.netlify.app/stories/?path=/story/refinements-menuselect--default

[mikebhart]

I can style the menu, but not the hover. in your example above the 'See all' when your hovering. What class would I target to change color of blue backgorund?

[Haroenv]

That's impossible: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#Styling_with_CSS

You can create a custom select if you want with connectMenu where you style the items, but equalling the accessibility of the native select box will not be straightforward.

[mikebhart]

I have used the following connectMenu example in my project
https://community.algolia.com/instantsearch.js/v2/connectors/connectMenu.html#example

but i get the following error

Uncaught TypeError: e.widgetParams.containerNode.html is not a function
at search.js:28
at Object.init (connectSearchBox.js:109)
at index.js:328
at Array.forEach ()
at Object.init (index.js:326)
at t.value (InstantSearch.js:411)
at Module. (search.js:117)
at n (bootstrap:19)
at Object. (site-bundle.js?ver=5.4.2:2)
at n (bootstrap:19)

I have outputted the MenuRenderingOptions and the html function is not there. Can you help?

[Haroenv]

you have that error because you're using a jQuery function .html, but haven't set the selector as jQuery. (note the containerNode: $ part in the example)

You're looking at the docs for v2 though, those arguments aren't the same as v4.

These kind of questions fit better in stack overflow than here though, they are general programming questions, and not related to InstantSearch.js itself.

[mikebhart]

it gets further now the to the map command and I get the following Uncaught TypeError: Cannot read property 'map' of undefined. I don't know why? Could you send me the v4 doc example version.

[Haroenv]

https://www.algolia.com/doc/api-reference/widgets/menu-select/js/#connector

I can't help with these vague questions though