角材料MD-开关

Question

我想定制MD-开关的颜色，而无需编写角/ JS如果很多可能

怎么在这里我希望它

我能拿到第一，主要becuse主旋律是固体格伦和我用这个方法，使开关淡绿色的身体

<md-switch ng-change="$ctrl.updateAsset($ctrl.asset, 
'disabled')" ng-model="$ctrl.asset.disabled"></md-switch> 

md-switch.md-checked .md-bar { 
background-color: rgb(212, 255, 186); //light green 
} 

如何将我改变头彩（圆形）？当开关关闭时，我将如何改变开关的头部和主体的颜色？

Answer 1

你称之为“头”是一个md-thumb类的元素;如您所知，酒吧拥有md-bar类。两者都被他们的background-color财产着色。

当开关处于“开”状态时，md-checked类处于活动状态。

md-switch .md-thumb { 
    background-color: darkgrey; 
} 

md-switch .md-bar { 
    background-color: lightgray; 
} 

md-switch.md-checked .md-thumb { 
    background-color: darkgreen; 
} 

md-switch.md-checked .md-bar { 
    background-color: lightgreen' 
} 

显然，你应该用你想要的精确色彩。

如果您正在使用SASS或LESS，则可以简化上述操作，并且如果您打算更改此一个组件以上，则可能需要查看自定义主题。

---

编辑补充：

要反转方向，使用transform属性，例如

md-switch .md-thumb-container { 
    transform: translate3d(100%, 0, 0); 
} 

md-switch.md-checked .md-thumb-container { 
    transform: translate3d(0, 0, 0); 
} 

根据您浏览器支持要求的需要添加供应商前缀。