По умолчанию изменение цвета asterisk внутри md-input-container

Question

Я работаю над контейнером md-input и пытаюсь изменить по умолчанию символ звездочки на красный. принять 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> 

цвет Звездочка по умолчанию является серый рядом с ярлыком "Имя клиента". (Если вы щелкните поле, его цвет chan ges to red.) Есть ли способ изменить цвет по умолчанию для звездочки от серого до красного?

заранее спасибо,

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; 
}