自定義input type radio 的樣式

2021-08-26 14:51:13 字數 843 閱讀 6962

原文:

問題:對單選按鈕自定義樣式,我們以前一直用的指令碼來實現,不過現在可以使用新的偽類 :checkbox 來實現。

如果直接對單選按鈕設定樣式,那麼這個偽類並不實用,因為沒有多少樣式能夠對單選按鈕起作用。不過,倒是可以基於單選按鈕的勾選狀態借助組合選擇符來給其他元素設定樣式。

很多時候,無論是為了表單元素統一,還是為了使用者體驗良好,我們都會選擇 label 元素和 input[type="radio"] 一起使用。當元素與單選按鈕關聯之後,也可以起到觸發開關的作用

思路:1. 可以為元素新增生成性內容(偽元素),並基於單選按鈕的狀態來為其設定樣式;

2. 然後把真正的單選按鈕隱藏起來;

3. 最後把生成內容美化一下。

解決方法:

1. 一段簡單的結構**:

2. 生成乙個偽元素,作為美化版的單選按鈕,先給偽元素新增一些樣式:

input[type="radio"] + label::before
3. 給單選按鈕的勾選狀態新增不同的樣式: 

input[type="radio"]:checked + label::before
4. 現在把原來的單選按鈕隱藏:

input[type="radio"]
隱藏原來的單選按鈕時,如果使用 display: none; 的話,那樣會把它從鍵盤 tab 鍵切換焦點的佇列中完全刪除。

於是可採用剪下的方式,讓剪下後的尺寸為零,這樣就隱藏了原來的單選按鈕。

自定義 如何自定義協議

何為自定義協議,其實是相對標準協議來說的,這裡主要針對的是應用層協議 常見的標準的應用層協議如http ftp smtp等,如果我們在網路通訊的過程中不去使用這些標準協議,那就需要自定義協議,比如我們常用的rpc框架 dubbo,thrift 分布式快取 redis,memcached 等都是自定義...

自定義控制項 自定義鐘錶

private context mcontext 畫筆 private paint mpaint 控制項的寬 private int mwidth x方向的圓心座標 private int center 鐘錶的半徑 private int mradio 圓環的寬 private int stroke...

自定義控制項及自定義屬性

自定義控制項在android開發中的重要性,是不言而喻,眾人皆知的。希望通過這二天的學習,能讓大家了解自定義控制項的原理,熟悉自定義控制項的使用步驟,並能寫出一些普通的效果。內容介紹 1 使用系統控制項,實現自定義的效果,案例有 優酷環形選單 廣告條 viewpager 下拉列表 spinner 2...