最近工作时解决了一个前端小问题(如下图所示):在Safari中,select的控件之上有不和谐的灰色部分。 刚开始时我以为是backgrand或是border设置不当之类产生的问题,在搜索了很久之后终于找到了问题所在:这个灰色部分来自于Safari默认的select设计,所以我需要用 appearance: none 来去除默认设计,但是这样一来,右侧的小箭头就会消失。本文将会详细描述我是如何添加小箭头的,该方法灵感来自于上司,目前没有在网上找到类似答案(当然网上也有不少别的好方法:比如使用background添加一个url的小箭头图片)。

我先直接附上我的方法,采用了一个自己编的例子便于讲解。

 <html>
<head>
<style type="text/css">
#selectDiv select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
width: 100px;
background-color: transparent;
font-size: 16px;
padding: 3px 15px;
margin: 0;}
#selectDiv {
width: 100px;
}
#selectDiv:after {
content: '<>';
font: 13px Consolas,monospace;
color: #000;
font-weight: 700;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
position: absolute;
left: 85px;
top: 14px;
pointer-events: none;
}
</style>
</head>
<body>
<div id="selectDiv">
<select>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
<option value="pear">Pear</option>
</select>
</div>
</body>
</html>

Safari (11.1)和Chrome (66.0.3359.139) 中最终的效果如下图:

Firefox (59.0.2) 中最终的效果如下图:

以上存在差别是由于依然还有默认的border设置,所以只需要再加上自定义的border设置就好了。

(如果你看懂了上面的代码,那你就不需要继续看下面的解释;如果你对其中的css有疑惑,那么你可能可以从下文中找到答案。如果你看完本文后有任何意见,欢迎留言。)

 

基本思路

简而言之,就是将<>符号旋转九十度就能得到一个类似于向上向下的小箭头,很简洁,而且可以根据自己的喜好调整大小粗细和风格。

部分CSS详解及注意事项

1.  ::after (:after)

这是伪元素,两个冒号是CSS3中的写法,是为了将其与伪类(:hover/:active等)区分。一个冒号是CSS2中的写法,但是为了兼容,很多浏览器依然支持一个冒号的写法。这个能产生一个在原有元素之后的元素,默认是与原有元素在同一行的。我认为用这个伪元素比另建一个div更方便。

2.  -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; 

这个作用就是去除浏览器中默认的格式,-webkit- 作用于Chrome,-moz-作用于Firfox,-ms-作用于IE,相同的道理也适用于之后的transform

3. <>字体需要挑选

这两个符号在某些字体时可能会连接在一起或是形状不合适,所以需要挑选合适的字体以得到满意的图案。效果图中展示的是Consolas字体,另外我还写了另一个字体monospace备选。后者的形状会尖一些。建议大家再尝试看看别的字体,也许有更合适的。另外,符号是否加粗和字体大小就全凭个人感觉了。

4.  pointer-events: none;

加上这句的效果直接体现在点击符合与点击框中别的地方的效果相同,如果少了这段文字,则会使点击符号时选项不会展开。某官方解释是“元素永远不会成为鼠标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。”大家自行理解一下。

5. 在select之外包裹div

我在select之外加了父元素,因为我发现我无法直接添加select:after。(如果有人知道原因,欢迎留言!)

一个select元素自定义设计的新思路:appearance: none之后利用<>符号制造小箭头的更多相关文章

  1. javascript操作select元素一例

    熟悉一下js对select元素的操作,html页面中建立一个form,其中包含一个select元素和submit按钮. 当选择select中某一项时改变其文字,当select中所有项的文字都改变后,重 ...

  2. 【笔记】css 自定义select 元素的箭头样式

    原文链接:https://www.imooc.com/qadetail/187585?t=281881 最近项目需要自定义select 元素的样式,搜索了一下发现了通过设置select 元素 css ...

  3. add() 方法用于向 <select> 添加一个 <option> 元素。

    //add() 方法用于向 <select> 添加一个 <option> 元素. //new Option() 创建一个option标签 school.add(new Opti ...

  4. 如何改变 select 元素的高度

    mozilla 对于美化 select 元素的样式有这样一段描述(用 CSS 美化 Select 元素): 众所周知,select 元素很难用 CSS 进行高效的设计.你可以影响任何元素的某些方面 - ...

  5. 解密jQuery事件核心 - 自定义设计(三)

    接上文http://www.cnblogs.com/aaronjs/p/3447483.html 本文重点:自定义事件 “通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率 ...

  6. jquery美化select,自定义下拉框样式

    select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...

  7. petshop4.0 具体解释之中的一个(系统架构设计)

    前言:PetShop是一个范例,微软用它来展示.Net企业系统开发的能力.业界有很多.Net与J2EE之争,很多数据是从微软的PetShop和Sun的PetStore而来.这样的争论不可避免带有浓厚的 ...

  8. Mybatis --- 映射文件、参数处理、参数值的获取、select元素

    映射文件:指导着MyBatis如何进行数据库增删改查, 有着非常重要的意义:   - cache   命名空间的二级缓存配置 - cache-ref   其他命名空间缓存配置的引用. - result ...

  9. select元素中设置padding效果

    更新2016-9-17:这个bug是在mac os上的发生,在window系统中不存在这个问题! 给select元素增加:padding-left:20px;但是未生效,如下图所示: 在select上 ...

随机推荐

  1. codeforces/contest/803/problem C

    题目:C. Maximal GCD 题意:输入n,k.将n拆成k个数的序列,使得这k个数的gcd最大.(且序列严格递增).1 ≤ n, k ≤ 1010 . 分析:假设k个数的gcd为d,则一定有d| ...

  2. MFC拖拽、选择目录、遍历文件

    1.选择目录 void CDecryptFileDlg::OnBnClickedSel() { std::wstring selectedDir; WCHAR szDir[MAX_PATH]; Zer ...

  3. Ubuntu17.04 sudo apt-get update升级错误

    最近在折腾Ubuntu,安装的是17.04版本的.想安装PHP7.X最新版本,但是要先升级.利用sudo apt-get update命名后,出现了以下报错: 忽略:1 http://cn.archi ...

  4. Dijango学习_01_pycharm创建应用

    一.当初在学dijango的时候,网上的教程非常的杂且多,对于؏؏☝ᖗ乛◡乛ᖘ☝؏؏我们这种初入虎门的小白来说有太多误区 (其实是大佬的操作着实对小白不太友好,原谅我个萌新..2333..) 二.pi ...

  5. php分页实现

    <?php header("content-type:text/html;charset=utf8"); include 'conn.php'; //每页显示的数据条数 $p ...

  6. 解析Object.defineProperty的作用

    对象是由多个名/值对组成的无序的集合.对象中每个属性对应任意类型的值. 定义对象可以使用构造函数或字面量的形式: 除了以上添加属性的方式,还可以使用Object.defineProperty定义新属性 ...

  7. linux命令之:yum

    yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及SUSE中的Shell前端软件包管理器.基於RPM包管理,能够从指定的服务器自动下载RP ...

  8. 做自己的docker镜像(基于ubuntu:16.04)

    基于ubuntu:16.04 apt-get update -y apt-get install sudo -y 换源 sudo apt-get install vim sudo vim /etc/a ...

  9. parquet文件 读取 原理

    学习一下parquet存储结构 原理 以及使用

  10. Linux搜索文件、文件夹数、文件个数命令

    1.查看某文件夹下文件的个数:ls -l|grep "^-"|wc -l 2.查看某文件夹下文件目录的个数:ls -l|grep "^d"|wc -l 3.查看 ...