3

code:

<select>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

i am new to react and implemented drop down successfully i like to add below function to drop down

1.add vertical scrollbar 2.keep open drop down by default

any help will be appreciated.thanks in advance

karthi
  • 181
  • 1
  • 3
  • 13
  • use react-select component https://www.npmjs.com/package/react-select, for documentation and available options https://react-select.com/ – sojin Dec 22 '21 at 07:10
  • @sojin thanks for reply.i like to implement it without npm help – karthi Dec 22 '21 at 07:23

1 Answers1

0

There's no simple perfect answer to both of your questions. The <select> element is notoriously difficult to style productively with CSS and its internal structure is complex, and hard to control. But there's some workaround:

  1. When there're many options in the <select>, it will add a scroll bar automatically
  2. Trigger a click event through javascript, see this answer
Xiaofeng Zheng
  • 51
  • 4
  • "If you want to get full control, you should consider using a library with good facilities for styling form widgets, or try rolling your own dropdown menu using non-semantic elements, JavaScript, and WAI-ARIA to provide semantics." See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#styling_with_css – Xiaofeng Zheng Dec 23 '21 at 08:16
  • i have to implement search with dropdown. library providing search option with input field which i do not want. link you shared to trigger click event not working for me – karthi Dec 23 '21 at 08:29
  • I meant you should consider using a component library rather than implementing it by yourself. If you do need to do this, read their documents or even source code first. – Xiaofeng Zheng Dec 24 '21 at 03:28
  • Like this: https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown. They always provide enough props for your customized requirement – Xiaofeng Zheng Dec 24 '21 at 03:29