UI堆积的select部分

实际思路是这样的：select本来就有一个固有的下拉箭头，有3种方式让它消失：一是挤出documentFlow，一是屏蔽，三是让select透明。挤压文档流的方法有点恶心。如果不考虑屏蔽，点击的时候触发不了select的点击事件（除非用js）。因此，使选择透明。要实现点击，实际的dom层级从下到上是：div=>span=>select所以需要设置z-index，select设置z-index=2，span设置z-index=1，然后设置divrelative，span和select设置为absolute，让两者重叠，只有div有背景，span和select没有背景，select的opacity设置为0（即透明）。现在你知道了，用户看到的是背景色，边框是一个div，他们看到的word是一个span，点击是select，select是透明的，放在span上面。话不多说，给我看看代码。这里使用了React。一个包，简洁明了，有兴趣的可以多了解一下constSelectsection=styled.div`position:relative;背景：线性渐变（#F8F8F8，#FDFDFD30%，#E8E8E8）；宽度：300px；高度：30px；向左飘浮;边框：1px实心#ececec；边界半径：4px；边距：15px0015px；>选择{宽度：300像素；高度：30px；左填充：15px；-索引：2；不透明度：0；}>跨度{宽度：300px;高度：30px；位置：绝对；文本对齐：左；字体：14px宋体；游标：指针；z-索引：1；20px;填充顶部：6px；}>div{background:url(${arrow})00不重复；宽度：24px；高度：24px；位置：绝对；顶部：7px；右：15px；}`classAppextendsComponent{render(){return(Ple请选择一个选项.........请选择一个选项...);}}exportdefaultApp;巩固知识背景颜色渐变background:linear-gradient(#F8F8F8,#FDFDFD30%,#E8E8E8);设置背景颜色渐变---不再需要裁剪背景图！这里就不举例了，是我在做项目的时候遇到的。具体来说，有一张图片包含了“黑色、灰色、红色”中箭头的具体长度和宽度。就是(12+12+12)*12，第四象限的精灵图由你来拼凑。即如上例，应用第一个箭头创建一个长宽为12*12的div。样式为：background:url(${arrow})00no-repeat;如果你想使用第二个箭头，那么使用样式：background:url(${arrow})0-24pxno-repeat;等等另一套方案，卧槽，差点忘了自己的土村法，倒是蛮有意思的。dom还是：