html select 文字居中显示图片,html原生select改造箭头及文字左右居中的一种办法...

使用过原生select做网页开发的人,一定会对select的两个问题痛心疾首,一是箭头没办法使用css改造,二是显示文字没办法左右居中。

首先,如果你有足够时间的话,请改用jquerymobile。jquerymobile提供了移动端非常强大的各种控件。对select除了基本css改造外,还支持选项的分组、多选等各种样式。

其次,使用div模拟,网上有较多的使用div+css模拟select的案例,可以找来参考。

最后,如果你对前端开发不熟,而且又想偷懒的话,可以采用本文中的土鳖方法。

改造箭头

博主在开发微信上的H5应用时 ,发现border:none和background:none在微信浏览器里面是无效的。在网上找到一个办法,直接清除了select的样式:

appearance:none;

-moz-appearance:none; /* Firefox */

-webkit-appearance:none; /* Safari 和 Chrome */

apperance属性可以改观元素的外观,加上这段css后,select元素就没有了边框、箭头和背景。appearance属性还可以使用元素显示出别的控件样式,例如button或者listbox。 接下来使用自定义的箭头放到select之上就可以了,可以将箭头盖在select之上,麻烦的是要考虑布局和事件的问题。

如果对箭头的要求比较不高,可以使用标签,本来是用于给文字加粗的,但如果文字是空的话,其border属性可以模拟一个箭头效果出来。

select {

width: 60%;

height: 40px;

background-color: rgb(246, 171, 138);

appearance: none;

-moz-appearance: none;

-webkit-appearance: none;

}

b {

border-color: #FFF rgb(246, 171, 138) rgb(246, 171, 138);

border-style: solid;

border-width: 4px;

position: absolute;

top: 36px;

margin-left: -22px;

}

参见上述css,标签的border属性,只有最上方设置成白色,其他三个方向上的颜色和select背景一样,这样,就可以呈现出来。另外,这种办法因为是对文本的修饰,所以并不会影响select属性的点击事件。效果如下图:

0818b9ca8b590ca3270a3433284dd417.png

文字左右居中

select标签的另外一大难题就是文字的左右居中问题,text-align:center不起作用。幸运的是,有一个属性对select还是有效的,这就让我们操作文字居中有了可能。这个属性就是text-indent,文字缩进。

只要通过js计算出select的宽度和文字的宽度,得到缩进距离,就能实现文字居中了。

select的宽度很好计算,关键是文字的宽度怎么办呢?div是不能测量文字长度的,刚好就可以,所以很简单,在页面某个位置放一个display:none的span标签,文字属性设置和select文字属性完全一样,塞上一两个汉字,专门用来测量文字宽度。

博主就是通过这样的土鳖办法来解决的。在实际操作中,发现测量出来的文字宽度和select下用到文字宽度有一丢丢差异,肉眼观察还是能觉察到的。估计是和select字体没能设置到完成相同,搞不清楚原因在哪。博主直接将测试的文字宽度乘以一个系数(例如1.1),调整到差不多一致。

前端路长,坑多,还是要多下功夫!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/497349.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一起来讨论web2.0吧

因为想要在经典上发,所以起了这么个名字。最近今天接触了很多这方面的东西,感觉就是关于新思潮的一切都扑面而来。感觉web上是个人物就在吵2.0,我是个初学者,谈一谈今上午的感受。一直以来,我虽然是做web编程的&#x…

2018年,这15个领域将会呈现指数级变化

来源:36氪概要:很多趋势将会在2018年继续下去,尤其是呈现指数级增长的多技术融合。很多趋势将会在2018年继续下去,尤其是呈现指数级增长的多技术融合。气候变化依然是一个最紧迫的问题,尤其当我们通过碳预算来解决问题…

中文WAP浏览器WapDisplayer V1.5发布

中文WAP浏览器WapDisplayer V1.5发布 中国被爱可以在线于2005-9-26发布了中文WAP浏览器WapDisplayer V1.5,欢迎大家下载使用。程序简介:WapDisplayer V1.5是一款利用M3Gate控件开发的中文WAP浏览器,除了保留原英文版M3Gate Version 1.2 beta的…

《自然》杂志:超导突触处理信息能力超人脑

来源:科技日报概要:据英国《自然》杂志网站近日报道,美国科学家研制出一款模拟人脑神经中枢处理过程的超导突触,其信息处理速度比人脑更快,而且更高效。据英国《自然》杂志网站近日报道,美国科学家研制出一…

计算机主机内部由什么组成,计算机是由主机和什么组成的?

电脑主机里由什么组成的安装前的准备在动手组装电脑前,应先学习电脑的基本知识,包括硬件结构、日常使用的维护知识、常见故障处理、操作系统和常用软件安装等。安装前配件的准备装机要有自己的打算,不要盲目攀比,按实际需要购买配…

Self Encapsulate Field(自封装字段)

直接访问一个字段&#xff0c;但与字段之间的耦合关系逐渐变得笨拙 private int low; private int high;boolean includes(int arg) {return arg > low && arg < high; } 重构&#xff1a;为这个字段建立get/set函数&#xff0c;并以这些函数访问字段 private…

[导入]Visual Studio 2005 Team Edition软件架构系列课程(1): 概述

Visual Studio 2005 Team Edition for Software Architects (VSTA) 提供了一些为设计和部署分布的、面向服务的应用系统的设计器。这些设计工具使架构师和开发人员以一种新的模式设计一个分布式系统&#xff0c;即连接型的应用或者提供服务&#xff0c;或者使用服务。在2005的版…

世界首批智能音箱AI IQ测试报告,小米、京东和阿里初步PK

一、小米、京东和阿里智能音箱测试结果&#xff1a;二、测试说明&#xff1a;1.对智能产品进行智商测试&#xff0c;是一项没有先例的科学实验和研究&#xff0c;因此研究会处于不断修正和发展的过程&#xff0c;研究团队并不认为这个测试结果是完全成熟和客观的。希望通过测试…

美国研究生院计算机数据科学排名,美国研究生数据科学专业排名

美国数据科学专业列表1. 哈佛大学  计算科学与工程理学硕士  M.S. in Computational Science and Engineering  专业排名&#xff1a;11. 哈佛大学  数据科学理学硕士  Master of Science in Data Science  专业排名&#xff1a;12. 芝加哥大学  分析学理学硕士 …

两台老机器,AMD K6-2和Intel C366

AMD的是我自己的老机器&#xff0c;上面运行RouteOS&#xff0c;原来是一个K6-2 450的U前天去电脑城帮胡叔叔配置电脑的时候&#xff0c;3块钱收到一个K6-2 266的U我今天换上新的U&#xff0c;然后跳成100*4.5&#xff0c;开机是亮了&#xff0c;但是实际运行再366可是&#xf…

html里table的scope,HTML表格的运用

table元素的简介table标签下&#xff0c;通常包含caption(表格的标题)&#xff0c;thead, tbody, tfoot,三个部分&#xff0c;如下表格所示&#xff1a;MonthSavingsSum$180January$100February$80 MonthSavingsSum$180January$100February$80table可以通过属性来定义它的样式&…

人工智能产业展望:2018年三大难题如何破解?

来源&#xff1a;腾讯研究院概要&#xff1a;当前&#xff0c;AI的竞争已然升级到国家竞争。当前&#xff0c;AI的竞争已然升级到国家竞争。2017年首次出现了“AI中国威胁论”。谷歌前董事长施密特公开抱怨美国政府对企业在人工智能领域的支持不足&#xff0c;这将使美国“在10…

在每天下午五点使用计算机,邮件攻击主要是_每天下午5点使用计算机_apt的攻击目标一般不是...

4.6.1 邮箱工具软件(2)(3)Close(退出)(4)【Edit】→【Settings(设置)】KaBoom还可以进行一些设置&#xff0c;在主界面上选择【Edit【】→【Setting】&#xff0c;然后弹出如图4.6.4所示的对话框&#xff0c;其中有下列信息&#xff1a;Losers&#xff1a;被攻击目标列表&#…

用SQL实现记录上下移动的思路

在做管理系统时,不可避免会要求对记录进行上下移动. 假如我们有一张表 t_test ,它的字段如下: CREATETABLE[dbo].[t_test]( [sysid][bigint]NOTNULL, [cname][nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL, [position][int]NULL) 其中的position用来表示记录…

误删了计算机桌面回收站,我电脑回收站里的东西已经被删除几天了?怎么可以找回!谢谢...

可以通过数据恢复软件来进行恢复的操作&#xff0c;具体如下&#xff1a;步骤一&#xff1a;在常用的电脑浏览器上搜索【互盾数据恢复软件】&#xff0c;然后将安装包下载至电脑上&#xff0c;安装完成&#xff0c;下载和安装的路径都要避免回收站所在的分区&#xff0c;避免造…

代码整洁之道--思维导图

#思维导图源码 System.out.println("https://www.processon.com/view/60dede90e401fd7e342b3fc3?fromnew1");

[转]该学Java或.NET?

该学Java或.NET&#xff1f;自从.NET问世以来&#xff0c;程序员都很关心的一个问题是「该学Java或.NET」。我也在挣扎&#xff0c;该「该继续Java的研究&#xff0c;或者该开始准备培养.NET的知识」。 当然&#xff0c;最好是能两者兼顾&#xff0c;但是每个人的时间都很有限&…