保存按钮被禁用时，如何在引导按钮上更改样式？

我正在使用btn-btn-primary类的引导程序进行按钮样式设置，但是当窗体无效时，按钮被禁用，并且淡蓝色和灰色背景与启用时没有足够的区别。我如何在两种情况下更改背景颜色和字体？保存按钮被禁用时，如何在引导按钮上更改样式？

main.html中

<form name="createProcessFormName" id="createProcessForm" role="form" class="form-horizontal"> 
    <div class="panel-body formHeight"> 
     <!--<p class="text-danger" ng-show="createProcessFormName.$dirty && createProcessFormName.$invalid">{{validationMessage}}</p>--> 
     <div class="row"> 
      <div class="form-group col-md-6 fieldHeight"> 
       <label for="name" class="col-md-5 required">Business 
       Name:</label> 
       <div class="col-md-7"> 
       <input type="text" class="form-control" id="name" 
       ng-model="DTO.LongName" ng-model-options="{updateOn: 'blur'}" 
       placeholder="Name" maxlength="1024" name="Name" 
       required> 
       <p class="text-danger" ng-show="createProcessFormName.processName.$touched && createProcessFormName.processName.$error.required">Business Process Name is required</p> 
      </div> 
     </div> 
    </div> 
</form> 

    <button ng-hide="edit" ng-disabled="createFormName.$invalid" class="btn btn-primary pull-right" type="button" ng-click="submit()">Save</button>

来源

2015-08-20 aftab

使用不同颜色的有效和无效？例如，如果您的表单无效，请将该按钮更改为红色/默认并将其禁用。这应该在启用（蓝色，明亮）和禁用（红色或灰色，光线）之间产生足够的对比。除此之外，你可以在''bootstrap.css'之后用* .css'覆盖按钮样式。这些只是一些建议，需要研究。 –

你最好的选择是使用:invalid伪类。

表单填写完所有必填字段后，表单将不再有效，因此按钮应回到正常状态。

form + button.btn.btn-primary { 
 
    background: blue; 
 
} 
 
form:invalid + button.btn.btn-primary { 
 
    background: red; 
 
}

<form> 
 
    <input type="text" required /> 
 
</form> 
 

 
<button ng-hide="edit" ng-disabled="createFormName.$invalid" class="btn btn-primary pull-right" type="button" ng-click="submit()">Save</button>

来源

2015-08-20 14:04:45 Stewartside

感谢您的回复我的按钮是在窗体外，我用这些类，你在CSS中提到，但我没有看到任何颜色的影响。 – aftab

我编辑我的问题，并添加表单。 – aftab

不幸运！如果这个CSS是bootstrap.css或我可以将其dd到任何CSS文件 – aftab

我建议使用纳克级https://docs.angularjs.org/api/ng/directive/ngClass

这将增加基于condtion CSS类。

当createFormName。$无效是真实的，它会从你的CSS应用invalidCssClassName

。

当createFormName。$无效是假的，它会从你的CSS删除invalidCssClassName

。

<button ng-hide="edit" ng-disabled="createFormName.$invalid" class="btn btn-primary pull-right" type="button" ng-class="{invalidCssClassName:createFormName.$invalid}" ng-click="submit()">Save</button>

来源

2015-08-20 14:15:03 Viraj

我可以得到一些基于我的代码的例子对不起，我仍然是新的AngularJs。。这将是很大的帮助，谢谢 – aftab

你可以检查这个视频关于Angular JS Fundamentals http://weblogs.asp.net/dwahlin/video-tutorial-angularjs-fundamentals-in-60-ish-minutes – Viraj

保存按钮被禁用时，如何在引导按钮上更改样式？

回答

相关问题