找到星号并在表单标签中更改为红色[Meteor JS Way]

Question

Consider SimpleSchema ,

ClientsSchema = new SimpleSchema({
  "firstName": {
    type: String,
    label: "First Name *",
    max: 20
  }
});

On UI it appears as below,

We mostly write javascript in below peice of code,

Template.Name.onRendered(function(){});

View Source looks like below,

<div class="col-sm-3">
    <div class="form-group" data-required="true">
        <label for="8fmieRFmLkqYQ5XFF" class="control-label">First Name *</label>
        <input type="text" name="firstName" id="8fmieRFmLkqYQ5XFF" required="" data-schema-key="firstName" 
            maxlength="20" class="form-control">
        <span class="help-block"></span>
    </div>
</div>

How can I change the color of asterisk? I tried various other articles on same query but I could not resolve it.

Answer 1

You'll likely want to append the asterisk using a pseudo-element in CSS. For example,

ClientsSchema = new SimpleSchema({
  "firstName": {
    type: String,
    label: "First Name", // remove asterisk from here
    max: 20
  }
});

Then style it:

.form-group[data-required="true"] .control-label::after {
  content: '*';
  display: inline-block;
  color: red;
}

No need for anything Meteor-specific here!