做手机项目中遇到想让select居中的问题，原以为是无解的。
看Jquerymobile的时候发现它的select可以居中，于是如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<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>
<div class="ui-select">
<span>The 1st Option</span>
<select>
<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没改，所以看起来像没改一样
网友评论