奇技淫巧：css實現整個表單只讀 form readonly

wangduanduan發表於2017-09-15
CSSORM

一般的方法往往給表單的各個input、select等加上readonly，但是這個方法有很多缺點。此處就不一一贅述。

我說的方法只需要給表單加上一個類，就可以讓表單只讀。

<form class="form-readonly"></form>

方法1: 用:before給form做個看不見的蒙版，遮住下面所有的元素，使之不響應任何事件

.form-readonly{
    position: relative;
}
.form-readonly:before{
    content: "";
    z-index: 1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

方法2: 用pointer-events:none, 讓所有事件穿透form

.form-readonly{
    pointer-events:none;
}

關於pointer-events屬性，可以看看這個介紹：https://segmentfault.com/a/11…

相關文章