移動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：若是本文對您有幫助，請點個贊讓我知道哦~微笑