1

I have created a HTML form that includes a select menu, the code:

<label className='form--group'>
  <div className='form--placeholder'>
    <span>Select a streaming service</span>
  </div>
  {/* This is where the replacement icon is <i class='fas fa-caret-down carat-down'></i> */}
  <select
    className='form--input'
    onChange={(e) => onChange(e)}
    name='streamingService'
    required
  >
    <option value='' defaultValue>
      --Select service--
    </option>
    <option value='Netflix'>Netflix</option>
    <option value='Disney+'>Disney+</option>
    <option value='Amazon Prime'>Amazon Prime</option>
  </select>
</label>

I want the down carat to cover the entire right side of the input box so I have removed the default one with CSS and added a new carat icon using font awesome which looks better however the new icon does not make the menu drop down when clicked :( does anyone have any HTML/CSS wizardy that could help me?

Bobert Ross
  • 77
  • 7

1 Answers1

0

Well your replacement icon is in no way connected to the select menu. It would probably make sense to add the icon in css, not in html like so: problem with <select> and :after with CSS in WebKit

Saf
  • 36
  • 5