需求

一个select下拉列表，有border, bg, 还有从设计拿来的向下的箭头。当点击的时候能有下拉列表。
大概UI如下

具体思路

需要的dom有三个

• div ----> 作用：定位置，设置背景样式，包括border

• select ----> 作用：点击时，弹出的下拉选项

• span -----> 作用：显示字

dom具体是：

<div><select><span><img>

实际上的思路是这样的：select原来有个固有的下拉箭头，想要让它消失，方法有三种：一种挤出文档流，一种挡住，另一种则是让select变成透明。

挤出文档流做法有点恶心，不考虑

挡住的话，那就无法做到点击的时候出发select的点击事件（除非用js）

所以，让select变成透明。

要实现点击，那么实际上的dom层次由底到上依次是：div => span => select

所以需要设置z-index，给select设置z-index = 2, span 的z-index = 1

然后div设置relative, span和select设置absolute，让两者重合

其中只有div有背景，span和 select都没有背景且select的opacity设为0（即透明）。

现在你知道了，

用户看到背景颜色,border是div的， 看到的字是span的,点击的是select，select透明，置于span之上

Talk is cheap, show me the code

这里用了react的一个包，简洁明了，有兴趣可以去了解下

const Selectsection = styled.div`position:relative;background:linear-gradient(#F8F8F8, #FDFDFD 30%, #E8E8E8);width:300px;height:30px;float:left;border:1px solid #ececec;border-radius:4px;margin:15px 0 0 15px;> select {width:300px;height:30px;padding-left: 15px;position:absolute;font: 14px Arial;z-index:2;opacity:0;}> span {width:300px;height:30px;position:absolute;text-align: left;font: 14px Arial;cursor: pointer;z-index:1;text-indent:20px;padding-top:6px;}> div {background:url(${arrow}) 0 0 no-repeat;width:24px;height:24px;position:absolute;top:7px;right:15px;}
`class App extends Component {render() {return (<Selectsection><select><option>Please select one option...</option><option>...</option><option>...</option></select><span>Please select one option...</span><div></div></Selectsection>);}
}export default App;

巩固知识

背景颜色渐变

background:linear-gradient(#F8F8F8, #FDFDFD 30%, #E8E8E8);

设置背景颜色渐变---再也不用切背景图啦！mb当年bg_*.png这种图真的切多了

雪碧图

这里没有例子，但是做项目的时候遇到，具体是有一张图，包含了“黑，灰，红”三色的箭头
具体长宽是(12+12+12 )*12，靠你们自己脑补了。

雪碧图的运用在第四象限，即如上例，应用第一个箭头，则创建一个div，长宽为12*12，运用的样式为：

background:url(${arrow}) 0 0 no-repeat;

如要运用第二个箭头，那么运用的样式为：

background:url(${arrow}) 0 -24px no-repeat;

自行类推

另一套方案

holy shit差点忘了俺自己的土村方法，不过挺有意思的。

dom仍旧是：

<div><select><span><img>

不同在于，div没有bg, border的功能，仅有作为定位的功能，bg, border移到span中去，即

• div ----> 作用：定位置

• select ----> 作用：点击时，弹出的下拉选项

• span -----> 作用：显示字，设置bg, border样式

那么会问了，span在前，你点击的时候，点的是span而不是selet，那么如何在不适用js的情况下，出发用户click select的效果呢？

这里有个样式：

pointer-events:none;

将这个样式apply给span，同时span与select完全贴合覆盖（width, height, 字体大小, indent），当点击span的时候，就会穿透点击select