這篇文章主要介紹怎么利用純CSS改變html頁面效果,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
成都創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供湄潭網(wǎng)站建設(shè)、湄潭做網(wǎng)站、湄潭網(wǎng)站設(shè)計、湄潭網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、湄潭企業(yè)網(wǎng)站模板建站服務(wù),10余年湄潭做網(wǎng)站經(jīng)驗,不只是建網(wǎng)站,更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
CSS代碼:
input[type=checkbox] { margin-right: 5px; cursor: pointer; font-size: 14px; width: 15px; height: 12px; position: relative; } input[type=checkbox]:after { position: absolute; width: 10px; height: 15px; top: 0; content: " "; background-color: #ff0000; color: #fff; display: inline-block; visibility: visible; padding: 0px 3px; border-radius: 3px; } input[type=checkbox]:checked:after { content: "?"; font-size: 12px; } input[type=radio] { margin-right: 5px; cursor: pointer; font-size: 14px; width: 15px; height: 12px; position: relative; } input[type=radio]:after { position: absolute; width: 10px; height: 15px; top: 0; content: " "; background-color: #ff0000; color: #fff; display: inline-block; visibility: visible; padding: 0px 3px; border-radius: 50%; } input[type=radio]:checked:before { content: "?"; display: block; position: relative; top: -2px; left: 3px; width: 6px; height: 6px; color: #fff; font-weight: 400; z-index: 1; }
HTML 示例:
plus
minus
plus
minus
以上是怎么利用純CSS改變html頁面效果的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!