Question

我有两个正常工作的复选框，但我遇到了一些CSS问题：

我制作了三张我正在看到的内容的屏幕截图（一个在mozilla firefox 50.1.0中，一个在Google Chrome 55.0.2883.87中，一个在Microsoft Edge 38.14393.0.0中）：

火狐：

铬：

边：

body元素中有完整的HTML（没有类）： <html>标记包含这些类，但我认为它不相关：

js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths

HTML：

<div class="container">
    <form>
        <span data-bind="visible: $data">
            <fieldset class="well">
                <div class="row form-group">
                    <div class="col-md-1 vcenter">@Html.CheckBoxFor(..., new {@class = "form-control pull-left", @data_bind = "checked: HasNoCodeBarreUnique"})</div>
                    <div class="col-md-11 vcenter">@Html.LabelFor(..., new {@class = "control-label"})</div>
                </div>

                <div class="row form-group">
                    <div class="col-md-1 vcenter">@Html.CheckBoxFor(..., new {@class = "form-control pull-left", @data_bind = "checked: IsInSystemeRemboursementReference" })</div>
                    <div class="col-md-11 vcenter">@Html.LabelFor(..., new {@class = "control-label"})</div>
                </div>
            </fieldset>
        </span>
    </form>
</div>

我省略了C＃模型属性和无关紧要的类。

所有课程均来自twitter-bootstrap-3，但是vcenter：

.vcenter {
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin-right: -4px;
}

我只想要一个标准的复选框，如：

那么如何以标准格式呈现我的复选框？

Answer 1

你可以从这样的事情开始（来自formbase的样式 - 所有现代浏览器和IE11 +）

body {
  padding: .9rem;
}
label {
  font-size: .85rem;
}
.control {
  margin: 0 0 .9rem;
  box-sizing: border-box
}
.control__input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}
.control__label {
  display: block;
  position: relative;
  padding-left: calc(20px + .6rem);
  will-change: transform
}
.control__label::before {
  border: 1px solid transparent
}
.control__label::after,
.control__label::before {
  content: '';
  position: absolute;
  top: calc(50% - 10px);
  left: 0;
  width: 20px;
  height: 20px
}
.control__label::after {
  border: 1px solid transparent
}
.control__label::before {
  border-color: #bbb;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05);
  background: #fff;
  background-size: 0
}
.control__label::after {
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  transform: scale(0);
  transition: transform .3s ease;
  will-change: transform
}
.control__input[type=radio]+.control__label::before {
  border-radius: 100%
}
.control__input[type=radio]+.control__label::after {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M256%2C464c114.9%2C0%2C208-93.1%2C208-208c0-114.9-93.1-208-208-208C141.1%2C48%2C48%2C141.1%2C48%2C256C48%2C370.9%2C141.1%2C464%2C256%2C464z%22/%3E%3C/svg%3E)
}
.control__input[type=checkbox]+.control__label::after {
  background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M461.6%2C109.6l-54.9-43.3c-1.7-1.4-3.8-2.4-6.2-2.4c-2.4%2C0-4.6%2C1-6.3%2C2.5L194.5%2C323c0%2C0-78.5-75.5-80.7-77.7c-2.2-2.2-5.1-5.9-9.5-5.9c-4.4%2C0-6.4%2C3.1-8.7%2C5.4c-1.7%2C1.8-29.7%2C31.2-43.5%2C45.8c-0.8%2C0.9-1.3%2C1.4-2%2C2.1c-1.2%2C1.7-2%2C3.6-2%2C5.7c0%2C2.2%2C0.8%2C4%2C2%2C5.7l2.8%2C2.6c0%2C0%2C139.3%2C133.8%2C141.6%2C136.1c2.3%2C2.3%2C5.1%2C5.2%2C9.2%2C5.2c4%2C0%2C7.3-4.3%2C9.2-6.2L462%2C121.8c1.2-1.7%2C2-3.6%2C2-5.8C464%2C113.5%2C463%2C111.4%2C461.6%2C109.6z%22/%3E%3C/svg%3E)
}
.control__input[type=checkbox][disabled]+.control__label,
.control__input[type=radio][disabled]+.control__label {
  cursor: not-allowed
}
.control__input[type=checkbox][disabled]+.control__label::before,
.control__input[type=radio][disabled]+.control__label::before {
  border-color: #c8c8c8;
  background-color: #f2f2f2;
  box-shadow: none
}
.control__input:checked+.control__label::after {
  transform: scale(1)
}

<div class="control">
  <input class="control__input" id="checkbox" type="checkbox">
  <label class="control__label" for="checkbox">Checkbox</label>
</div>
<div class="control">
  <input class="control__input" id="Radio" type="radio">
  <label class="control__label" for="Radio">Radio</label>
</div>

Answer 2

正如Craicerjack所说，不同的浏览器以自己的样式呈现复选框（和其他表单元素）。你很难让他们看起来一样，只用CSS浏览浏览器。有一些很好的JavaScript / jQuery脚本可以帮到你。这个很老https://github.com/IonDen/ion.checkRadio，但我已成功地在各种项目中使用它。

如何以标准格式提供复选框？

2 个答案: