讓網頁元件的 Event(click, change.....) 無動作的方式 - pure css

會想記錄這個主要是因為在寫網頁時會遇到需要讓 input, select, button 無動作的狀況

其實下意識會利用 disabled, readonly 的屬性來達到...可是

1) disabled - 在 form 中有 disabled 的表單元件(input, select...)會在 form submit 時不帶值

2) readonly - select 元件還是可以繼續選擇，除非把 option 都套上 disabled ，但這又會回到 disabled 不帶值的狀況

以上的說明，主要是還是希望 form submit 時要帶到值出去，所以 readonly 的使用是最符合的，但問題就在 readonly 在 select 是沒作用的…

當然，其實可以使用 javascript 來做到「無滑鼠事件, 且保留其值」的方式，只是相較之後我要說的方式來說，js 的方式複雜的多，而且我還是只用純 css 的方式完成。

[scss]
form {
  [readonly] {
    pointer-events: none;
  }
}

pointer-event 的說明可以看 mdn

展示：