`
lvsenlin
  • 浏览: 125649 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

select让文字居中

阅读更多

做手机项目中遇到想让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。

 

代码写的很神奇是不是?

分享到:
评论
3 楼 cyx1993 2016-04-29  
select 不能选啊
2 楼 wuweitiandian 2014-06-16  
JS方面的话,应该怎么写呢?
1 楼 wuweitiandian 2014-06-16  
挺神奇的……

相关推荐

    在IE8 FF中使用padding设置select控件文字垂直居中

    主要介绍了在IE8 FF中设置select控件文字垂直居中的方法,使用到了padding:8px 0,需要的朋友可以参考下

    表单元素和文字垂直居中对齐问题解决整理

    表单页面,为了使表单元素和文字都垂直居中对齐,加个样式input,select{vertical-align:middle},文本框和下拉框都没问题,但是单选框和复选框就杯具了。 大多表现:单选,复选和文字无间距,单选文字偏上,复选偏上...

    select自定义小三角样式代码(实用总结)

    让select透明,上面加一个span,来替换select框,可以自定义小三角样式,也可以做出select文字居中的效果。  &lt;div class=ui-select&gt; 使用加息券或现金券 &lt;i class=icon-down&gt;&lt;/i&gt; &lt;select name= id=&gt; 元...

    F5在线HTML编辑器 v4.0

    1、支持字体、段落、大小、粗体、斜体下划线、上下标、左右与居中对齐等基本文本格式排版;2、数字、项目编号,减少、增加缩进量自如仿word快速排版模式;3、支持查找、替换,撤消、重做等基本编辑操作;4、提供插入...

    阿赛在线HTML编辑器 v7.rar

    1、支持字体、段落、大小、粗体、斜体下划线、上下标、左右与居中对齐等基本文本格式排版; 2、数字、项目编号,减少、增加缩进量自如仿word快速排版模式; 3、支持查找、替换,撤消、重做等基本编辑操作; 4、提供...

    H5+CSS3.zip

    语义化标签:段落标签,标签自定义文字样式,标题标签,块,标签定义头部,标签定义底部,标签定义正文区段,标签定义侧边栏区域; 效果标签: 标签实现换行效果,特殊字符&nbsp;实现空格效果,标签实现水平线...

    《程序天下:JavaScript实例自学手册》光盘源码

    12.9 打开的窗口居中 12.10 打开窗口的等待提示 12.11 在打开的窗口中返回数据 12.12 创建弹出窗口 12.13 不允许窗口出现滚动条 12.14 页面打开的同时打开另外两个窗口 12.15 慢慢变大的窗口 12.16 设置新打开的窗口...

    程序天下:JavaScript实例自学手册

    12.9 打开的窗口居中 12.10 打开窗口的等待提示 12.11 在打开的窗口中返回数据 12.12 创建弹出窗口 12.13 不允许窗口出现滚动条 12.14 页面打开的同时打开另外两个窗口 12.15 慢慢变大的窗口 12.16 设置新打开的窗口...

    F5在线HTML编辑器 v4.0 fro5.comF5

    1、支持字体、段落、大小、粗体、斜体下划线、上下标、左右与居中对齐等基本文本格式排版; 2、数字、项目编号,减少、增加缩进量自如仿word快速排版模式; 3、支持查找、替换,撤消、重做等基本编辑操作; 4、...

    编写高质量代码-Web前端开发修炼之道.azw3

    kindle高清文字版,可在电脑上用clearview电子书阅读软件阅读。 第1章 从网站重构说起 1.1 糟糕的页面实现,头疼的维护工作 1.2 Web标准——结构、样式和行为的分离 1.3 前端的现状 1.4 打造高品质的前端代码,...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    1.jquery+css美化select下拉菜单插件(Stylish Select v0.3)下载 2.jQuery+CSS实现多项选择文本框的插件下载 3.jQuery表单验证插件EasyValidator 2.0带TIP提示效果 4.jQuery导航插件下载之支持三级的Menu暖色...

    HTML5跨屏框架ZUI 1.9.1

    新增highlight_selected选项,用于让下拉菜单上的选中项目永远有高亮效果,并且与鼠标悬停时的效果进行区分。数据表格2:修复在height设置为page时鼠标无法滚动的问题。表单:优化了&lt;select&gt;在macOS系统上强制...

    html入门到放弃笔记

    增加一根水平线,size为5px,宽度为50%,居中对齐,颜色为红色(red) 7、预格式化 作用:保留源文档中的回车 和 空格 的作用 &lt;pre&gt;&lt;/pre&gt; 8、分区元素 1、块分区元素 语法:&lt;div&gt;&lt;/div&gt; 作用:布局 2、行内...

    PHP程序开发范例宝典III

    让你短时间内由一名菜鸟到高手绝对没问题! 由于权限有限,分3部份下载 PHP程序开发范例宝典 内容提要 《PHP程序开发范例宝典》全面介绍了应用PHP进行网站开发的各种技术和技巧。《PHP程序开发范例宝典》分为20章...

    Excel VBA实用技巧大全 附书源码

    01024改变Excel的标题文字 01025删除Excel的标题文字 01026将Excel设置为全屏显示 01027在状态栏中显示信息 01028显示、隐藏状态栏 01029显示、隐藏编辑栏 01030显示、隐藏常用工具栏 01031显示、隐藏格式工具栏 ...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part1

    实例198 页面布局(3列左右侧固定中间自适应居中) 244 实例199 页面布局(2列右侧固定左侧自适应宽度) 247 实例200 页面布局(2列左固定右自适宽度+底平齐) 249 实例201 页面布局(2列右固定左自适宽度+底平齐) 252 3.6 ...

    js使用小技巧

    ENTER键可以让光标移到下一个输入框 (event.keyCode==13)event.keyCode=9"&gt; 文本框的默认值 (this.defaultValue)"&gt; title换行 obj.title = "123&#13sdfs&#32" 获得时间所代表的微秒 var n1 = new Date("2004-...

    PHP开发实战1200例(第1卷).(清华出版.潘凯华.刘中华).part2

    实例198 页面布局(3列左右侧固定中间自适应居中) 244 实例199 页面布局(2列右侧固定左侧自适应宽度) 247 实例200 页面布局(2列左固定右自适宽度+底平齐) 249 实例201 页面布局(2列右固定左自适宽度+底平齐) 252 3.6 ...

Global site tag (gtag.js) - Google Analytics