这将使虚线边界，以及背景你寻找，同样，如果你想设置一个特定的背景颜色，当勾选时，简单地设置它在适当的地方为你的问题:) 这个解决方案还设置了一个自定义的复选标记图标等。

对于像这样的HTML元素: <input type="checkbox" />

input[type='checkbox']:checked {
  background-color: rgb(60,69,77,0.9);
}
input[type='checkbox']:checked:after {
  content: '\2713';
  color:white;
}
input[type='checkbox']{
  background:#ff0000;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  width: 20px !important;
  height: 20px !important;
  appearance:none;
  border-radius:10%;
  border: 1px dotted rgb(60,69,77,0.9);
  box-shadow: none;
  font-size: 1em;
}

您可以避免添加额外的标记。这适用于任何地方，除了IE通过设置CSS外观:

输入(type = "复选框"){ -webkit-appearance:没有; -moz-appearance:没有; 外观:无; /*样式复选框*/ 宽度:16 px; 高:16 px; 背景颜色:红色; ｝ 检查输入(type = "复选框"):{ 背景颜色:绿色; ｝ <input type="checkbox" />

自定义复选框与CSS (WebKit浏览器解决方案仅Chrome, Safari，移动浏览器)

<input type="checkbox" id="cardAccptance" name="cardAccptance" value="Yes">
<label for="cardAccptance" class="bold"> Save Card for Future Use</label>

CSS:

    /* The checkbox-cu */
    
    .checkbox-cu {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 0;
        cursor: pointer;
        font-size: 16px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    
    /* Hide the browser's default checkbox-cu */
    
    .checkbox-cu input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    
    
    /* Create a custom checkbox-cu */
    
    .checkmark {
        position: absolute;
        top: 4px;
        left: 0;
        height: 20px;
        width: 20px;
        background-color: #eee;
        border: 1px solid #999;
        border-radius: 0;
        box-shadow: none;
    }
    
    
    /* On mouse-over, add a grey background color */
    
    .checkbox-cu:hover input~.checkmark {
        background-color: #ccc;
    }
    
    
    /* When the checkbox-cu is checked, add a blue background */
    
    .checkbox-cu input:checked~.checkmark {
        background-color: transparent;
    }
    
    
    /* Create the checkmark/indicator (hidden when not checked) */
    
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }
    
    
    /* Show the checkmark when checked */
    
    .checkbox-cu input:checked~.checkmark:after {
        display: block;
    }
    
    
    /* Style the checkmark/indicator */
    
    .checkbox-cu .checkmark::after {
        left: 7px;
        top: 3px;
        width: 6px;
        height: 9px;
        border: solid #28a745;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        z-index: 100;
    }

使用纯CSS修改复选框样式。这不需要任何JavaScript或HTML操作:

.form input[type="checkbox"]:before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; content: "\f096"; opacity: 1 !important; margin-top: -25px; appearance: none; background: #fff; } .form input[type="checkbox"]:checked:before { content: "\f046"; } .form input[type="checkbox"] { font-size: 22px; appearance: none; -webkit-appearance: none; -moz-appearance: none; } <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <form class="form"> <input type="checkbox" /> </form>

我更喜欢使用图标字体(如fontawesme)，因为它很容易用CSS修改它们的颜色，而且它们在高像素密度的设备上缩放得非常好。这里是另一个纯CSS变体，使用类似于上面的技术。

(下面是一个静态图像，这样你可以可视化结果;请参阅JSFiddle的交互式版本。)

与其他解决方案一样，它使用label元素。相邻的span保存复选框字符。

span.bigcheck-target { font-family: FontAwesome; /* Use an icon font for the checkbox */ } input[type='checkbox'].bigcheck { position: relative; left: -999em; /* Hide the real checkbox */ } input[type='checkbox'].bigcheck + span.bigcheck-target:after { content: "\f096"; /* In fontawesome, is an open square (fa-square-o) */ } input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after { content: "\f046"; /* fontawesome checked box (fa-check-square-o) */ } /* ==== Optional - colors and padding to make it look nice === */ body { background-color: #2C3E50; color: #D35400; font-family: sans-serif; font-weight: 500; font-size: 4em; /* Set this to whatever size you want */ } span.bigcheck { display: block; padding: 0.5em; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <span class="bigcheck"> <label class="bigcheck"> Cheese <input type="checkbox" class="bigcheck" name="cheese" value="yes" /> <span class="bigcheck-target"></span> </label> </span>

这是它的JSFiddle。

实现简单，易于定制的解决方案

经过大量的搜索和测试，我得到了这个解决方案，它是简单的实现和更容易定制。在此解决方案中:

您不需要外部库和文件 你不需要加 在页面中添加额外的HTML 您不需要更改复选框名称 和id

简单地把流动的CSS放在你的页面顶部，所有的复选框样式将像这样改变:

input[type=checkbox] { transform: scale(1.5); } input[type=checkbox] { width: 30px; height: 30px; margin-right: 8px; cursor: pointer; font-size: 17px; visibility: hidden; } input[type=checkbox]:after, input[type=checkbox]::after { content: " "; background-color: #fff; display: inline-block; margin-left: 10px; padding-bottom: 5px; color: #00BFF0; width: 22px; height: 25px; visibility: visible; border: 1px solid #00BFF0; padding-left: 3px; border-radius: 5px; } input[type=checkbox]:checked:after, input[type=checkbox]:checked::after { content: "\2714"; padding: -5px; font-weight: bold; } <input type="checkbox" id="checkbox1" /> <label for="checkbox1">Checkbox</label>