Question

我正在研究md-input-container，我正在尝试将默认的星号颜色更改为红色。 Plz看看这里 pen link

<div ng-controller="AppCtrl" layout="column" ng-cloak="" class="inputdemoErrors" ng-app="MyApp">

  <md-input-container class="md-block">
    <label>Description</label>
    <input md-maxlength="30" required="" md-no-asterisk="" name="description" ng-model="project.description">
    <div ng-messages="projectForm.description.$error">
      <div ng-message="required">This is required.</div>
      <div ng-message="md-maxlength">The description must be less than 30 characters long.</div>
    </div>
  </md-input-container>

  <div layout="row">
    <md-input-container flex="50">
      <label>Client Name</label>
      <input required="" name="clientName" ng-model="project.clientName">
      <div ng-messages="projectForm.clientName.$error">
        <div ng-message="required">This is required.</div>
      </div>
    </md-input-container>

    <md-input-container flex="50">
      <label>Project Type</label>
      <md-select name="type" ng-model="project.type" required="">
        <md-option value="app">Application</md-option>
        <md-option value="web">Website</md-option>
      </md-select>
    </md-input-container>
  </div>

  <md-input-container class="md-block">
    <label>Client Email</label>
    <input required="" type="email" name="clientEmail" ng-model="project.clientEmail" minlength="10" maxlength="100" ng-pattern="/^.+@.+\..+$/">

    <div ng-messages="projectForm.clientEmail.$error" role="alert">
      <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
        Your email must be between 10 and 100 characters long and look like an e-mail address.
      </div>
    </div>
  </md-input-container>

  <md-input-container class="md-block">
    <label>Hourly Rate (USD)</label>
    <input required="" type="number" step="any" name="rate" ng-model="project.rate" min="800" max="4999" ng-pattern="/^1234$/">

    <div ng-messages="projectForm.rate.$error" multiple="" md-auto-hide="false">
      <div ng-message="required">
        You've got to charge something! You can't just <b>give away</b> a Missile Defense
        System.
      </div>

      <div ng-message="min">
        You should charge at least $800 an hour. This job is a big deal... if you mess up,
        everyone dies!
      </div>

      <div ng-message="pattern">
        You should charge exactly $1,234.
      </div>

      <div ng-message="max">
        {{projectForm.rate.$viewValue | currency:"$":0}} an hour? That's a little ridiculous. I
        doubt even Bill Clinton could afford that.
      </div>
    </div>
  </md-input-container>

  <div>
    <md-button type="submit">Submit</md-button>
  </div>

  <p style="font-size:.8em; width: 100%; text-align: center;">
    Make sure to include <a href="https://docs.angularjs.org/api/ngMessages" target="_blank">ngMessages</a> module when using ng-message markup.
  </p>
</form>

星号的默认颜色在＆＃34;客户名称＆＃34;旁边是灰色的。标签。（如果单击该字段，其颜色将变为红色。）有没有办法可以将星号的默认颜色从灰色更改为红色？

提前感谢，

Answer 1

将以下内容添加到CSS中：

md-input-container.md-default-theme:not(.md-input-focused):not(.md-input-invalid) label.md-required:after, md-input-container:not(.md-input-focused):not(.md-input-invalid) label.md-required:after {
   color:red;
}

出于某种原因，仅提供以下无效：

label.md-required:after {
    color:red;
}

md-input-container内的默认星号颜色更改

1 个答案: