按月存檔:3 月 2020

用css自訂radio btn / checkbox 與 css選擇器

實做技巧參考這篇

重點摘要:

  1. html內radio btn對應的要加上label,裡面可以加入span比較好做後續設定
  2. 用這段隱藏原本的樣式(單選type就改radio)
    input[type="checkbox"] {
        display:none;
    }
  3. 用這段設定新樣式(未選擇),搭配after跟before就可以做到替換框框的效果。
    input[type="checkbox"] + label span
  4. 用這段設定已選擇時的樣式
    input[type="checkbox"]:checked + label span

然後第一次看到+,使用上他就是可以選擇他第一個接觸那個元件。所以找了一下現在css到底有哪些選擇器,css選擇器可以參考這篇

然後我終於搞清楚 > 是什麼意思了。簡單來說 .aaa > ul  跟 .aaa ul 的差異是:

後者只要被 .aaa 包的底下所有 ul 都套用。 前者則是只有第一層。如果第一層ul又包了一層ul,這層就不會被套用。