移动Web MUI框架Switch开关自定义中文文字0x00 前沿0x01 效果图0x02 HTML源码0x03 CSS样式

0x00 前沿

MUI框架中的switch组件显示文字是英文（ON/OFF），本文的主要目的有两个：一是将英文改成中文，二是指定switch组件自定义文字。

0x01 效果图

0x02 HTML源码

<div class="mui-input-row">
<label>语言</label>
<div id="lang" class="mui-switch mui-active">
<div class="mui-switch-handle"></div>
</div>
</div>
<div class="mui-input-row">
<label>音乐</label>
<div id="music_on" class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</div>

0x03 CSS样式

Ⅰ class选择器通用写法：

.mui-switch.mui-active:before{content: '开';}
.mui-switch:before{content: '关';}

Ⅱ id选择器指定元素写法

#lang.mui-switch.mui-active:before{content: '中文';}
#lang.mui-switch:before{content: '英文';}

【转载请注明出处: http://blog.csdn.net/leytton/article/details/79837666】
PS：如果本文对您有帮助，请点个赞让我知道哦~微笑