资讯专栏INFORMATION COLUMN

UI 积累之select section

monw3c / 341人阅读

摘要:需求一个下拉列表,有还有从设计拿来的向下的箭头。挤出文档流做法有点恶心,不考虑挡住的话,那就无法做到点击的时候出发的点击事件除非用所以,让变成透明。

需求

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

具体思路

需要的dom有三个

div ----> 作用:定位置,设置背景样式,包括border

select ----> 作用:点击时,弹出的下拉选项

span -----> 作用:显示字

dom具体是:

Please select one option...
); } } 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仍旧是: