摘要:現在前端頁面效果日益豐富,默認的組件樣式顯然不能滿足設計需求。前段時間開發項目中剛好接觸到相關的需求,在此特地整理下修改樣式的方法。它使用純編寫,沒有任何的文件。
</>復制代碼
現在前端頁面效果日益豐富,默認的input組件樣式顯然不能滿足設計需求。前段時間開發項目中剛好接觸到相關的需求,在此特地整理下修改radio、CheckBox樣式的方法。
原理:大致原理都是使用原生的checkbox或input標簽,在其后面設置相關聯的label元素。給元素設置為透明,然后通過定位讓用戶看到的是
利用css3偽元素實現樣式修改html代碼
</>復制代碼
您的性別:
男
女
css樣式
</>復制代碼
.radio-sex {
position: relative;
display: inline-block;
margin-right: 12px;
}
.radio-sex input {
vertical-align: middle;
margin-top: -2px;
margin-bottom: 1px;
/* 前面三行代碼是為了讓radio單選按鈕與文字對齊 */
width: 20px;
height: 20px;
appearance: none;/*清楚默認樣式*/
-webkit-appearance: none;
opacity: 0;
outline: none;
/* 注意不能設置為display:none*/
}
.radio-sex label {
position: absolute;
left: 0;
top: 0;
z-index: -1;
/*注意層級關系,如果不把label層級設為最低,會遮擋住input而不能單選*/
width: 20px;
height: 20px;
border: 1px solid #3582E9;
border-radius: 100%;
}
.radio-sex input:checked+label {
background: #3582E9;
}
.radio-sex input:checked+label::after {
content: "";
position: absolute;
left: 8px;
top: 2px;
width: 5px;
height: 12px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: rotate(45deg);
}
優點:充分借助了CSS3的優勢,無需使用js和圖片,僅用純CSS3就可搞定
缺點:兼容性較差,僅支持IE9+
案例:
實現思路
1.設置input 屬性hidden對該input進行隱藏
</>復制代碼
2.借助label for標簽通過id綁定input ,這樣在點擊label時實際就是點擊了input
</>復制代碼
3.定義label的樣式,設置未選中狀態的背景圖
</>復制代碼
.advice{
height: 12px;
width: 12px;
display: inline-block;
background-image: url("https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-unchecked.png");
background-repeat: no-repeat;
background-position: center;
vertical-align: middle;
margin-top: -4px;
}
4.使用相鄰選擇器設置選中狀態label的樣式
</>復制代碼
input[type="radio"]:checked + .advice{
background-image: url("https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-checked.png");
}
以上是radio單選框的實現代碼,checkbox也是類似 將input type定義成checkbox即可
利用插件實現 awesome-bootstrap-checkbox插件awesome-bootstrap-checkbox是一款可以美化Bootstrap復選框和單選按鈕的插件。它使用純CSS編寫,沒有任何的javascript文件。它通過在原生Bootstrap組件的基礎上做一些小改動,即可完成漂亮的美化效果。
演示地址:http://awesome-bootstrap-chec...
插件下載:https://www.bootcdn.cn/awesom...
注:需要引入awesome-bootstrap-checkbox.css、font-awesome.css以及font awesome對應的字體font文件
pretty.css是一款純css3漂亮的checkbox和radio美化效果。pretty.css可以和多種字體圖標結合使用,對原生的checkbox和radio進行美化,還可以制作按鈕點擊時的動畫效果。
演示地址:http://www.htmleaf.com/Demo/2...
插件下載:https://www.bootcdn.cn/pretty...
小編知道的方法先介紹到這里,大家如有更好的方法歡迎留言討論。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/114327.html
摘要:現在前端頁面效果日益豐富,默認的組件樣式顯然不能滿足設計需求。前段時間開發項目中剛好接觸到相關的需求,在此特地整理下修改樣式的方法。它使用純編寫,沒有任何的文件。 現在前端頁面效果日益豐富,默認的input組件樣式顯然不能滿足設計需求。前段時間開發項目中剛好接觸到相關的需求,在此特地整理下修改radio、CheckBox樣式的方法。 原理:大致原理都是使用原生的checkbox或inp...
摘要:先看看純美化過后的和效果查看。項目地址在出現之前,我們美化和需要借助,最具代表性的就是,它功能強大復雜并且主題很多。為了更好的在項目中重用,我把美化的代碼寫成一個項目,叫,寓意像魔法一樣去美化和。 Radio和checkbox需要美化嗎?答案是必須的,因為設計風格一直都會變化,原生的樣式百年不變肯定滿足不了需求。 先看看純CSS美化過后的radio和checkbox效果:查看。 項目地...
摘要:先看看純美化過后的和效果查看。項目地址在出現之前,我們美化和需要借助,最具代表性的就是,它功能強大復雜并且主題很多。為了更好的在項目中重用,我把美化的代碼寫成一個項目,叫,寓意像魔法一樣去美化和。 Radio和checkbox需要美化嗎?答案是必須的,因為設計風格一直都會變化,原生的樣式百年不變肯定滿足不了需求。 先看看純CSS美化過后的radio和checkbox效果:查看。 項目地...
閱讀 2688·2021-11-16 11:53
閱讀 2752·2021-07-26 23:38
閱讀 2082·2019-08-30 15:55
閱讀 1763·2019-08-30 13:21
閱讀 3688·2019-08-29 17:26
閱讀 3317·2019-08-29 13:20
閱讀 885·2019-08-29 12:20
閱讀 3207·2019-08-26 10:21
...加支持RADIUS協(xié)議與RNC進(jìn)行認(rèn)證,計(jì)費(fèi)上的互通。 2.前言 FreeRadius是一款OpenSource軟件,基于Radius協(xié)議,實(shí)現(xiàn)RadiusAAA(Authentication,Authorization,Accounting)功能。 3.Radius服務(wù)器搭建 3.1Radius服務(wù)器端安裝 解壓安裝包,雙擊? 2.點(diǎn)擊Next3. ...
ChatGPT和Sora等AI大模型應(yīng)用,將AI大模型和算力需求的熱度不斷帶上新的臺(tái)階。哪里可以獲得...
大模型的訓(xùn)練用4090是不合適的,但推理(inference/serving)用4090不能說合適,...
圖示為GPU性能排行榜,我們可以看到所有GPU的原始相關(guān)性能圖表。同時(shí)根據(jù)訓(xùn)練、推理能力由高到低做了...