文档

Mocha使用好帮手

select(选单样式)

作者：kevinhehe
版本：v.1
依赖：mocha.css

点击运行Demo

样式1-1行一个 .mocha-select-scheme1


1
2
3
4
5
6
7
8
9
10
11
12
<div class="mocha-select mocha-select-scheme1 mocha-select-skin1">
    <select><option value="请选择省份">请选择省份</option></select>
    <select><option value="请选择城市">请选择城市</option></select>
    <div class="mocha-select-panel">
        <label for="">省份</label>
        <select><option value="请选择省份">请选择省份</option></select>
    </div>
    <div class="mocha-select-panel">
        <label for="">城市</label>
        <select><option value="请选择城市">请选择城市</option></select>
    </div>
</div>

样式2-1行2个 .mocha-select-scheme2


1
2
3
4
5
6
7
8
9
10
11
12
<div class="mocha-select mocha-select-scheme2 mocha-select-skin1">
    <select><option value="请选择省份">请选择省份</option></select>
    <select><option value="请选择城市">请选择城市</option></select>
    <div class="mocha-select-panel">
        <label for="">省份</label>
        <select><option value="请选择省份">请选择省份</option></select>
    </div>
    <div class="mocha-select-panel">
        <label for="">城市</label>
        <select><option value="请选择城市">请选择城市</option></select>
    </div>
</div>

样式3-1行3个 .mocha-select-scheme3


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="mocha-select mocha-select-scheme3 mocha-select-skin1">
    <select><option value="请选择省份">请选择省份</option></select>
    <select><option value="请选择城市">请选择城市</option></select>
    <select><option value="请选择城市">请选择城市</option></select>
    <div class="mocha-select-panel">
        <label for="">省份</label>
        <select><option value="请选择省份">请选择省份</option></select>
    </div>
    <div class="mocha-select-panel">
        <label for="">城市</label>
        <select><option value="请选择城市">请选择城市</option></select>
    </div>
    <div class="mocha-select-panel">
        <label for="">城市</label>
        <select><option value="请选择城市">请选择城市</option></select>
    </div>
</div>

样式4-1行1个左字右控件 .mocha-select-scheme4


1
2
3
4
5
6
7
8
9
10
<div class="mocha-select mocha-select-scheme4 mocha-select-skin1">
    <div class="mocha-select-panel">
        <label for="">请选择大区:</label>
        <select><option value="请选择省份">请选择省份</option></select>
    </div>
    <div class="mocha-select-panel">
        <label for="">选择大区:</label>
        <select><option value="请选择城市">请选择城市</option></select>
    </div>
</div>

样式5-1行2个左字右控件 .mocha-select-scheme5


1
2
3
4
5
6
7
8
9
10
11
12
<div class="mocha-select mocha-select-scheme5 mocha-select-skin1">
    <div class="mocha-select-panel">
        <label for="">请选择大区:</label>
        <select><option value="请选择省份">请选择省份</option></select>
        <select><option value="请选择城市">请选择城市</option></select>
    </div>
    <div class="mocha-select-panel">
        <label for="">选择大区:</label>
        <select><option value="请选择城市">请选择城市</option></select>
        <select><option value="请选择城市">请选择城市</option></select>
    </div>
</div>

修改模块皮肤CSS

模块的默认皮肤类.mocha-select-skin1，您可以在您项目的page.css里修改.mocha-select-skin1皮肤类，或者新增.mocha-select-skin2。

1
2
/* skin */
.mocha-select-skin1 select{font-size:0.12rem;color:#000;border-color:#65655b;}