更换checkbox的原有样式
生活随笔
收集整理的這篇文章主要介紹了
更换checkbox的原有样式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
通常情況下,各個瀏覽器對的樣式不一致,并且不那么美觀。所以有時候設計需要我們更換原有的樣式:
html:
<span><input type="checkbox" class="input_check" id="check3" value="123"><label for="check1"></label></span>css:
span{position: relative;}.input_check {position: absolute;visibility: hidden;cursor:pointer;}.input_check+label {display: inline-block;width: 14px;height: 14px;border: 2px solid #677795;} .input_check:checked+label:after {content: "";position: absolute;left: 2px;bottom: 12px;width: 9px;height: 4px; border: 2px solid #677795;border-top-color: transparent;border-right-color: transparent;-ms-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-webkit-transform: rotate(-45deg); transform: rotate(-45deg);}其中必須注意,input的id必須和label的for一致,這是為了點擊label聯動點擊了此checkbox。:after實現的是對號的樣式,方框旋轉45度實現。
效果如下:
轉載于:https://www.cnblogs.com/gtlm/p/8177324.html
總結
以上是生活随笔為你收集整理的更换checkbox的原有样式的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: maven打包项目的时候找不到jar包,
- 下一篇: 【网络流24题】魔术球问题(最大流)