New Components module from Phoenix 1.7 (input select use case)

You can use the slot syntax for select inputs:

<.input field={{f, :city_id}} type="select" label="Choose your city">
  <:option :for={city <- @cities} value={city.id}><%= city.name %></:option>
</.input>

Update: this syntax is no longer correct. For new projects generated with Phoenix 1.7.0-rc.0, the <.input type="select"/> component uses Phoenix.HTML.Form.options_for_select under the hood. Since commit 2fdb410, you’d use your original snippet with option changed to options:

<.input 
  field={{f, :city_id}}
  type="select" 
  label="Choose your city" 
  options={Enum.map(@cities, fn city -> {city.name, city.id} end)} 
/>

Is there any way to pass styling, e.g. different background colour for each option which shall be maintained in the selected option (dropdown functionality)?
I could find how this is possible via Phoenix.HTML.Form.options_for_select .

I am looking for the same answer.
I can find VERY LITTLE in the form of applying ANY STYLING to phoenix1.7 html and MUCH LESS for FORMS

GOOGgeling is not our friend in this case… and I asked this question just today on my topic: forms Development

I am not sure that we had the same problem to solve. I only needed a multicolour dropdown element.
Unfortunately, I could not solve it with pure Liveview components. Hence, I opted for javascript based solution via a hook.