select 文字居中

2019-11-08 本文已影响0人梦想森林

做手机项目中遇到想让select居中的问题，原以为是无解的。

看Jquerymobile的时候发现它的select可以居中，于是如下：

<!DOCTYPE html>

<html>

<head>

<style>

.ui-select {

text-align: center;

/* 加border只是为了看到边框*/

border:solid 1px;

}

.ui-select select {

position: absolute;

left: 0px;

top: 0px;

width: 100%;

height: 3em;

opacity: 0;

}

</style>

</head>

<body>

<span>The 1st Option</span>

<option value="1">The 1st Option</option>

<option value="2">The 2nd Option</option>

<option value="3">The 3rd Option</option>

<option value="4">The 4th Option</option>

</select>

</div>

</body>

</html>

基本实现思路就是隐藏掉select，实际点击到的是span。

代码写的很神奇是不是？

ps：还需要给select加js事件修改一下span的text，因为select已经改了span没改，所以看起来像没改一样