背景色切换离子和范围 [英] Background color for ionic toggle and range
本文介绍了背景色切换离子和范围的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用的离子,使移动应用。我想补充一个背景切换按钮和范围。我使用过开关/范围背景暗。它没有工作。
<离子切换切换级=切换平衡肘背景暗NG模型=检查>
33
< /离子切换> < DIV CLASS =项目范围范围均衡区间背景暗>
< I类=图标离子IOS-阳光灿烂的外形>< / I>
<输入类型=范围NAME =体积最小=0最大=100NG-模式=RV>
< I类=图标离子IOS-晴天>< I&GT /;
< / DIV>
解决方案
您可以切换按钮和范围的背景颜色使用此CSS更改
.toggle输入:检查+ .track {
背景颜色:#8577b5;
边框颜色:#8577b5;
}.range.range - 平衡输入:: - webkit的 - 滑块 - 拇指:前{
背景:#8577b5;}
.range.range光输入:: - WebKit的滑盖大拇指:前{
背景:#DDD;}
.range.range - 稳定的输入:: - webkit的 - 滑块 - 拇指:前{
背景:#b2b2b2;
}
.range.range - 正输入:: - webkit的 - 滑块 - 拇指:前{
背景:#4a87ee; }
.range.range-平静输入:: - WebKit的滑盖大拇指:前{
背景:#43cee6;
}
.range.range - 自信输入:: - webkit的 - 滑块 - 拇指:前{
背景:#ef4e3a;
}
.range.range - 通电输入:: - webkit的 - 滑块 - 拇指:前{
背景:#f0b840;
}
.range.range - 皇家输入:: - webkit的 - 滑块 - 拇指:前{
背景:#8a6de9; }
.range.range暗输入:: - WebKit的滑盖大拇指:前{
背景:#444;
}
I am using ionic to make a mobile app. I want to add a background to toggle button and range. I used toggle/range-background-dark. It did not work
<ion-toggle toggle-class="toggle-balanced toggle-background-dark" ng-model="check">
33
</ion-toggle>
<div class="item range range-balanced range-background-dark">
<i class="icon ion-ios-sunny-outline"></i>
<input type="range" name="volume" min="0" max="100" ng-model="RV">
<i class="icon ion-ios-sunny"></i>
</div>
解决方案
You can change toggle button and range background color using this css
.toggle input:checked + .track {
background-color: #8577b5;
border-color: #8577b5;
}
.range.range - balanced input::-webkit - slider - thumb: before {
background: #8577b5;}
.range.range-light input::-webkit-slider-thumb:before {
background: # ddd;}
.range.range - stable input::-webkit - slider - thumb: before {
background: #b2b2b2;
}
.range.range - positive input::-webkit - slider - thumb: before {
background: #4a87ee; }
.range.range-calm input::-webkit-slider-thumb:before {
background: #43cee6;
}
.range.range - assertive input::-webkit - slider - thumb: before {
background: #ef4e3a;
}
.range.range - energized input::-webkit - slider - thumb: before {
background: #f0b840;
}
.range.range - royal input::-webkit - slider - thumb: before {
background: #8a6de9; }
.range.range-dark input::-webkit-slider-thumb:before {
background: #444;
}
这篇关于背景色切换离子和范围的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文