移动Web MUI框架Switch开关自定义中文文字

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：若是本文对您有帮助，请点个赞让我知道哦~微笑