資訊專欄INFORMATION COLUMN
摘要：利用修改樣式做項目的時候需要使用單選按鈕，但是默認的樣式與設計不一致所以需要修改默認的樣式，如下圖。不想使用圖片，所以利用的重新實現了一遍。
利用css3修改input[type=radio]樣式
做項目的時候需要使用單選按鈕input[type=radio]，但是默認的樣式與UI設計不一致,所以需要修改默認的樣式，如下圖。搜索的時候發現有一些實現是利用背景圖實現。不想使用圖片，所以利用css3的重新實現了一遍。在ie8下無效。
原理實現代碼利用標簽與對應的關聯,給設置透明,使用position(定位)讓用戶看到的是標簽的樣式,點擊時會選擇到對應的,使用的:checked偽類選擇器來改變選中的樣式.
div {
position: relative;
line-height: 30px;
}
input[type="radio"] {
width: 20px;
height: 20px;
opacity: 0;
}
label {
position: absolute;
left: 5px;
top: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #999;
}
/*設置選中的input的樣式*/
/* + 是兄弟選擇器,獲取選中后的label元素*/
input:checked+label {
background-color: #fe6d32;
border: 1px solid #fe6d32;
}
input:checked+label::after {
position: absolute;
content: "";
width: 5px;
height: 10px;
top: 3px;
left: 6px;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(45deg)
}
dome
鏈接：http://runjs.cn/code/hmevb9gs
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50772.html
摘要：利用修改樣式做項目的時候需要使用單選按鈕，但是默認的樣式與設計不一致所以需要修改默認的樣式，如下圖。不想使用圖片，所以利用的重新實現了一遍。 利用css3修改input[type=radio]樣式 做項目的時候需要使用單選按鈕input[type=radio]，但是默認的樣式與UI設計不一致,所以需要修改默認的樣式，如下圖。搜索的時候發現有一些實現是利用背景圖實現。不想使用圖片，所以利...
摘要：現在前端頁面效果日益豐富，默認的組件樣式顯然不能滿足設計需求。前段時間開發項目中剛好接觸到相關的需求，在此特地整理下修改樣式的方法。它使用純編寫，沒有任何的文件。 現在前端頁面效果日益豐富，默認的input組件樣式顯然不能滿足設計需求。前段時間開發項目中剛好接觸到相關的需求，在此特地整理下修改radio、CheckBox樣式的方法。 原理：大致原理都是使用原生的checkbox或inp...
摘要：現在前端頁面效果日益豐富，默認的組件樣式顯然不能滿足設計需求。前段時間開發項目中剛好接觸到相關的需求，在此特地整理下修改樣式的方法。它使用純編寫，沒有任何的文件。 現在前端頁面效果日益豐富，默認的input組件樣式顯然不能滿足設計需求。前段時間開發項目中剛好接觸到相關的需求，在此特地整理下修改radio、CheckBox樣式的方法。 原理：大致原理都是使用原生的checkbox或inp...
摘要：現在前端頁面效果日益豐富，默認的組件樣式顯然已經不能滿足需求。兼容更低版本瀏覽器的樣式修改最后附上演示鏈接修改和默認樣式 現在前端頁面效果日益豐富，默認的input組件樣式顯然已經不能滿足需求。趁著這次開發的頁面中有這方面的需求，在這里整理一下修改radio、checkbox、select的方法。 radio and checkbox 修改radio的默認樣式有兩種常用的方法 純CSS...
閱讀 1156·2021-11-24 09:38
閱讀 3604·2021-11-22 15:32
閱讀 3458·2019-08-30 15:54
閱讀 2568·2019-08-30 15:53
閱讀 1494·2019-08-30 15:52
閱讀 2498·2019-08-30 13:15
閱讀 1837·2019-08-29 12:21
閱讀 1395·2019-08-26 18:36
