摘要:純實現和實現效果在開發端的項目時,經常會用到和組件,可是因為原生的樣式相對來說不符合設計師的設計風格,所以我們可能會經常引用第三方的模塊去實現,或者通過等其他方式去。
radio-and-checkbox
純CSS實現radio和checkbox實現效果
reset-radio在開發PC端的項目時,經常會用到radio和checkbox組件,可是因為原生的樣式相對來說不符合設計師的設計風格,所以我們可能會經常引用第三方的模塊去實現,或者通過JS等其他方式去hack。這樣相對來說增加了代碼量不說,還特別復雜,所以才有了這個純CSS依賴原生input[radio]和input[checkbox]的實現方式,主要代碼如下:
html主要代碼
CSS代碼,這里主要是通過一個子節點span去配合input:checked兄弟選擇器,來修改樣式
.reset-radio { display: inline-block; position: relative; width: 16px; height: 16px; } .reset-radio .real-target { z-index: 1; width: 100%; height: 100%; position: absolute; display: inline-block; background: #ffffff; border: 1px solid #dadde0; border-radius: 100%; top: 0; left: 0; bottom: 0; } .reset-radio input[type=radio] { cursor: pointer; z-index: 2; width: 16px; height: 16px; opacity: 0; position: absolute; left: 0; top: 0; margin: 0; right: 0; bottom: 0; } .reset-radio input:checked+span { border-color: #48b4ec; } .reset-radio input:checked+span::before { content: ""; position: absolute; background: #48b4ec; width: 6px; height: 6px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 100%; }
演示效果
radio
checkbox
reset-checkboxreset-checkbox原理是一樣的就不在贅述了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52201.html
摘要:插件介紹是一款純漂亮的和美化效果。可以和多種字體圖標結合使用,對原生的和進行美化,還可以制作按鈕點擊時的動畫效果。支持的圖標庫有安裝可以使用,或來安裝。 插件介紹 pretty.css是一款純css3漂亮的checkbox和radio美化效果。pretty.css可以和多種字體圖標結合使用,對原生的checkbox和radio進行美化,還可以制作按鈕點擊時的動畫效果。 showImg(...
摘要:技術我們使用一些特殊的選擇器,然后配合單選框以及復選框自帶的一些特性,可以實現元素的顯示隱藏效果。當接口返回的分數是分的時候,剛好占據一半的星星,星半,只要計算出百分比就行,只用管數據,用上數據驅動的特點來動態展示樣式這個簡直不要太容易。 最近做的一個項目涉及到評分和展示分數的模塊,UI設計師也給了幾個切好的圖片,實現五角星評分方式很多,本質愛折騰的精神和對性能追求以及便于維護的考慮,...
摘要:技術我們使用一些特殊的選擇器,然后配合單選框以及復選框自帶的一些特性,可以實現元素的顯示隱藏效果。當接口返回的分數是分的時候,剛好占據一半的星星,星半,只要計算出百分比就行,只用管數據,用上數據驅動的特點來動態展示樣式這個簡直不要太容易。 最近做的一個項目涉及到評分和展示分數的模塊,UI設計師也給了幾個切好的圖片,實現五角星評分方式很多,本質愛折騰的精神和對性能追求以及便于維護的考慮,...
摘要:技術我們使用一些特殊的選擇器,然后配合單選框以及復選框自帶的一些特性,可以實現元素的顯示隱藏效果。當接口返回的分數是分的時候,剛好占據一半的星星,星半,只要計算出百分比就行,只用管數據,用上數據驅動的特點來動態展示樣式這個簡直不要太容易。 最近做的一個項目涉及到評分和展示分數的模塊,UI設計師也給了幾個切好的圖片,實現五角星評分方式很多,本質愛折騰的精神和對性能追求以及便于維護的考慮,...
摘要:現在前端頁面效果日益豐富,默認的組件樣式顯然不能滿足設計需求。前段時間開發項目中剛好接觸到相關的需求,在此特地整理下修改樣式的方法。它使用純編寫,沒有任何的文件。 現在前端頁面效果日益豐富,默認的input組件樣式顯然不能滿足設計需求。前段時間開發項目中剛好接觸到相關的需求,在此特地整理下修改radio、CheckBox樣式的方法。 原理:大致原理都是使用原生的checkbox或inp...
閱讀 2472·2021-10-12 10:11
閱讀 1219·2021-10-11 10:58
閱讀 3258·2019-08-30 15:54
閱讀 696·2019-08-30 13:59
閱讀 667·2019-08-29 13:07
閱讀 1392·2019-08-26 11:55
閱讀 2133·2019-08-26 10:44
閱讀 2620·2019-08-23 18:25