文档

Mocha使用好帮手

select(选单样式)

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

样式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;}