css修改checkbox默認樣式

input[type="checkbox"]{

width:20px;

? height:20px;

? display:inline-block;

? text-align:center;

? vertical-align:middle;

? line-height:18px;

? position:relative;

}

input[type="checkbox"]::before{

content:"";

? position:absolute;

? top:0;

? left:0;

? /*background: #fff;*/

? width:100%;

? height:100%;

? border-radius:4px;

? /*border: 1px solid #d9d9d9*/

}

input[type="checkbox"]:checked::before{

content:"\2714";

? background-color:#fff;

? position:absolute;

? top:0;

? left:0;

? width:100%;

? border:1px solid #6c00ff;

? color:#6c00ff;

? font-size:20px;

? font-weight:bold;

}



?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1、垂直對齊 如果你用CSS,則你會有困惑:我該怎么垂直對齊容器中的元素?現在,利用CSS3的Transform,...
    kiddings閱讀 3,206評論 0 11
  • 各種純css圖標 CSS3可以實現很多漂亮的圖形,我收集了32種圖形,在下面列出。直接用CSS3畫出這些圖形,要比...
    劍殘閱讀 9,700評論 0 8
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 27,749評論 1 45
  • 1. tab列表折疊效果 html: 能源系統事業部 崗位名稱: 工作地點 崗位名...
    lilyping閱讀 1,900評論 0 1
  • 給你講個笑話,你可別哭。 1. 單曲循環《我要你》無數遍。 看完后心情沉重不已,回來刷遍了所有的知乎內容,非常讓人...
    sometimes2222閱讀 860評論 0 0