styling label in simple_form

Question

I'd like to make part of the label in a span i.e. the * needs to be a different colour, but I'm not sure how to get the coding of this right

.form_field_wrapper
      = f.label :category_id, '*Category', class: 'category_label_sup_form'
      = f.collection_select(:category_id, Category.all, :id, :name, include_blank: false)

I've tried to do:

%span.green_required *
.form_field_wrapper
    = f.label :category_id, '*Category', class: 'category_label_sup_form'
    = f.collection_select(:category_id, Category.all, :id, :name, include_blank: false)

But that just puts the * on a line of its own

I guess the alternative is to work out why it isn't starred automatically from the model

validates :name, presence: true
validates :category_id, presence: true, numericality: true

From the validation above, the name category is automatically starred, but the category one isn't.

Jon Jon · Accepted Answer · 2014-02-01T11:06:40

Inspect the HTML which simple_form produces, then write your own CSS markup to style the elements as you need.

There is no need to modify the label within the HTML just to set the colour of the asterisk.

styling label in simple_form

1 Answers