Search code examples
selectsassruby-on-rails-5simple-form

How to style a select element generated by simple_form in sass format?


I have this simple_form:

.reveal.doubt id="doubt-material-#{material.id}" data-reveal=true
  button.close-button data-close=true aria-label="Close reveal" type="button"
    span aria-hidden="false" ×
  h5 #{t 'students.materials.index.questions.button'}
  p #{t 'students.materials.index.questions.form_explanation'}
  = simple_form_for [:student, trail, component, material, material_student, doubt], html: {id: "doubt" }, remote: true do |f|
    = f.input :recipient, collection: [['[email protected]','Atendimento a cliente'],['[email protected]','Suporte técnico']],value_method: :first, label_method: :second, label: "#{t 'students.materials.index.questions.form_send_email'}", include_blank: "#{t 'students.materials.index.questions.form_blank_line'}", required: true, input_html: {class: 'custom_select'}
    = f.input :question, as: :text, label: true, label: "#{t 'students.materials.index.questions.form_message'}" , input_html: { rows: "2" }
    = f.submit "#{t 'students.materials.index.questions.form_send_button'}", class: 'button primary-button-active'

It generates the html below:

enter image description here

Which generates the form below:

enter image description here

Now I want to style the dropdown but I am failing with finding in the code the select element. At inspect it is very clear to me where it is.

I have tried to add:

.input
  position: relative
  select
    background-color: white
    &#doubt_recipient
      border: 2px solid red
      padding: 5px

But failed.

Does anyone have any suggestion ? Thank you very much.


Solution

  • It was actually a matter of just running the line below in terminal:

    bundle exec rake assets:precompile

    And CSS style rendered.

    Finally I have just added style at the id:

    #doubt_recipient
      border: 2px solid red
      padding: 5px
      background-color: white