radio-and-checkbox
純CSS實現radio和checkbox實現效果
reset-radio
在開發PC端的項目時，經常會用到radio和checkbox組件，可是因為原生的樣式相對來說不符合設計師的設計風格，所以我們可能會經常引用第三方的模塊去實現，或者通過JS等其他方式去hack。這樣相對來說增加了代碼量不說，還特別復雜，所以才有了這個純CSS依賴原生input[radio]和input[checkbox]的實現方式，主要代碼如下：
html主要代碼
| <div class="reset-radio"> <input checked type="radio" id="age1" name="age"> <span class="real-target"></span></div> |
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%;} |
reset-checkbox
reset-checkbox原理是一樣的就不在贅述了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
