<分区>
html - 我怎样才能让我的复选框成为标准格式？
我有两个工作正常的复选框，但我遇到了一些 CSS 问题:
我制作了三张我所看到的屏幕截图(一张在 mozilla firefox 50.1.0 中，一张在谷歌浏览器中 55.0.2883.87 和一张在 Microsoft Edge 中 38.14393.0.0 ):
火狐:
Chrome:
边缘:
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;
}
我只想要一个标准的复选框，例如:
那么如何以标准格式呈现我的复选框？
最佳答案
你可以从这样的东西开始(样式来自 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>关于html - 我怎样才能让我的复选框成为标准格式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41718669/