记录一个CSS黑科技属性--pointer-events

最近在工作中遇到一个需要只读的表单字段也要可以提交过去，之前只读都是用的disabled，加上这个属性之后，表单字段就提交不过去了。

后来发现可以换成readOnly，但是readOnly只支持 input，select不支持，所以就得想别的办法。

然后就发现了CSS里pointer-events属性，简直是个黑科技。

以下是pointer-events的介绍

CSS pointer-events 属性

实例

设置元素是否对指针事件做出反应：

div.ex1 {
  pointer-events: none;
}

div.ex2 {
  pointer-events: auto;
}

CSS 语法

pointer-events: auto|none;

属性值

属性值	描述
auto	默认值。元素对指针事件做出反应，比如 :hover 和 click。
none	元素不对指针事件做出反应。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

所以，我们实现以上的场景就可以将需要只读的字段，赋值一个class，然后通过这个CSS属性，来控制只读效果，只需要额外加一个只读的背景色就好了。

如下所示：

.readOnly select {pointer-events: none;background:#f7f7f7;}