UI 积累之select section

需求

一个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