因為<label>的特性有兩點 : ①不呈現任何效果, ②用戶點擊該標簽, 瀏覽器能自動將焦點轉移到相關的表單控制元件上.
<form> <input type="checkbox" name="sex" id="male" /> <label for="male">Male</label> </form>
所以正適合用于修改input的樣式.
進入正文, 修改input[type="checkbox"]的樣式
默認樣式: 選定前
選定后
;
/*選定前*/ #male + label::before{ /*設定label標簽的偽元素*/ content: "\a0"; /*不換行空格*/ display: inline-block; width: 20px; height: 20px; border: 1px solid #999; } /*選定時*/ #male:checked + label::before{ content: "\2714"; /*√*/ text-align: center; background-color: rgb(68, 171, 247); } /*取消默認框*/ #male{ display: none; }
設定后的樣式：選定前
選定后
;
本文只是簡單描述修改input[type="checkbox"]樣式的原理，其他不足之處請諒解
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/123473.html
標籤：Html/Css
上一篇：微信小程式路由跳轉