最近在工作中遇到一个需要只读的表单字段也要可以提交过去，之前只读都是用的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;}