input復(fù)選框改變樣式

展開
今天有人問我input復(fù)選框要怎么改變樣式，查了一下，特整理下來：

<input type="checkbox">

input[type="checkbox"] {
     width: 12px;
     height: 12px;
     display: inline-block;
     text-align: center;
     vertical-align: middle;
     line-height: 12px;
     position: relative;
 }
  
 input[type="checkbox"]::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     background: #fff;
     width: 100%;
     height: 100%;
     border: 1px solid #CACDCF
 }
  
 input[type="checkbox"]:checked::before {
     content: "\2610";
     background-color: #000;
     color: black;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     border: 1px solid #000;
     font-size: 12px;
     font-weight: bold;
 }

其中偽類里面的那個content可參照這個鏈接，然后對應(yīng)的去修改color、background-color及邊框顏色就好了

input checkbox 復(fù)選框大小修改

展開

checkbox的大小是不能通過寬高是設(shè)定的，而且在調(diào)checkbox的樣式的同時，很可能會調(diào)亂同行的其他樣式。

解決方法

設(shè)置zoom屬性（放大）

利用style：

<input type="checkbox" name="returnfee"  style="zoom:180%;">
1
     利用css3：

  input[type="checkbox"]{
    zoom:180%;
  }

兼容性

2018121723362819.png

原文鏈接：https://blog.csdn.net/idomyway/article/details/85058581

原文鏈接：https://blog.csdn.net/MYTLJP/article/details/103542050