自定義 radio 的樣式,更改選中樣式

2022-06-09 19:06:08 字數 628 閱讀 3708

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

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

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

解決方法:

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

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

input[type="radio"] + label::before
注:可以通過margin-top來調節位置

現在的樣子:

原來的單選按鈕仍然可見,但是我們先給單選按鈕的勾選狀態新增樣式:

3. 給單選按鈕的勾選狀態新增不同的樣式: 

input[type="radio"]:checked + label::before
現在的樣子: 

4. 現在把原來的單選按鈕隱藏:

input[type="radio"]
現在的樣子:

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

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

自定義單選按鈕radio的樣式

如果直接對單選按鈕設定樣式,那麼這個偽類並不實用,因為沒有多少樣式能夠對單選按鈕起作用。不過,倒是可以基於單選按鈕的勾選狀態借助組合選擇符來給其他元素設定樣式。很多時候,無論是為了表單元素統一,還是為了使用者體驗良好,我們都會選擇 label 元素和 input type radio 一起使用。當元...

Lay ui自定義radio表單驗證

由於無法通過required直接對radio或者check設定必填,因此採用自定義的表單驗證方式,最終結果如下圖。前端 此 用js拼接而成,html直接根據內容自主拼接即可 此js 為table自定義選項內容 return str return js form.verify 對非輸入框設定焦點 fo...

滑鼠自定義樣式

滑鼠自定義樣式,在網上查了查,現在把找到的覺得不錯的方法展示如下 1 bitmap cursor bitmap bitmap.fromfile 20050129171521936.gif 括號內填寫本地路徑 bitmap mynewcursor new bitmap cursor.width 2,c...