Javascript 从md选项卡自定义未选定md选项卡标签的样式
我尝试为我的angular material应用程序开发以下用户界面。但我不知道如何在CSS中自定义所有未选中的md选项卡 HTML代码:Javascript 从md选项卡自定义未选定md选项卡标签的样式,javascript,html,css,angularjs,angular-material,Javascript,Html,Css,Angularjs,Angular Material,我尝试为我的angular material应用程序开发以下用户界面。但我不知道如何在CSS中自定义所有未选中的md选项卡 HTML代码: <md-tabs class="md-primary" md-selected="selectedIndex" md-align-tabs="top" md-autoselect md-dynamic-height id="top"> <md-tab ng-repeat="tab in tabs"
<md-tabs class="md-primary" md-selected="selectedIndex" md-align-tabs="top" md-autoselect md-dynamic-height id="top">
<md-tab ng-repeat="tab in tabs" flex layout="column" layout-fill>
<md-tab-label>
<div layout="row" layout-fill>
<div class="md-tab-item-index">
<span>{{tab.index}}</span>
</div>
<div class="md-tab-item-label">
{{tab.title}}
</div>
<div class="md-tab-item-label-separator"></div>
</div>
</md-tab-label>
<md-tab-body>
<div ng-include="tab.content"></div>
</md-tab-body>
</md-tab>
</md-tabs>
简单:
md选项卡ng scope ng隔离scope md墨水波纹md active
那是主动的
md选项卡ng scope ng隔离scope md墨水波纹
那不是主动的
全部使用你的样式,然后为活动样式准备特殊样式。你能在jsfiddle中运行代码吗。你能用小提琴来实现你的解决方案吗?jsfiddle.net/mueller92/c9w521ka
.md-tab-item-label {
color: white;
font-size: 14px;
line-height: 20px;
text-transform: capitalize;
}
.md-tab-item-label-separator {
background-color: rgba(255, 255, 255, 0.5);
-webkit-box-flex: 0 1 auto;
-webkit-flex: 0 1 auto;
flex: 0 1 auto;
height: 1px;
min-width: 0;
position: relative;
top: 12px;
width: 68px;
margin-left: 10px;
}
.md-tab-item-index {
background-color: #ffffff;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-box-flex: 0 0 auto;
-webkit-flex: 0 0 auto;
flex: 0 0 auto;
font-size: 12px;
font-weight: 500;
height: 24px;
line-height: 24px;
position: relative;
text-align: center;
width: 24px;
color: #000000;
margin-right: 10px;
}