How can I have my checkboxes in a standard format?

Question

I got two checkbox which is working fine, but I face some CSS issues:

I made three screenshot of what I'm seeing (One in mozilla firefox 50.1.0, one in google chrome 55.0.2883.87 and one in Microsoft Edge 38.14393.0.0):

Firefox:

Chrome:

Edge:

There are the complete HTML inside the body element (which has no class): The <html>tag have those classes but I don't think it's relevant:

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>

I omitted either the C# model property and the irrelevants classes in purpose.

All classes are from twitter-bootstrap-3 but vcenter:

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

I just want a standard checkbox like:

So how to render my checkboxes in a standard format ?

Each browser has its own style for rendering basic html elements. If you want to have each styled consistently, youll have to create the style. — Craicerjack, Jan 18 '17 at 11:51
I know that each browser have its own rendering style, but in this case it is not the default behaviour, and I'm asking why — Dipiks, Jan 18 '17 at 11:54
Search "custom checkbox" and you'll see a ton of way to customize your own checkbox. That's the only way to standardized across browsers. — elPastor, Jan 18 '17 at 11:56
have you tried inspecting the element to see what styles are applied to it? — Pete, Jan 18 '17 at 12:06

max · Accepted Answer · 2017-01-18T12:36:14.097

You can start with something like this (styles from formbase - all modern browsers and 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>

score 0 · Answer 2 · answered Jan 18 '17 at 11:55

0

As Craicerjack said above, the different browsers render checkboxes (and other form elements) in their own styles. You'll struggle to get them all looking the same and cross browser with just CSS. There are some good JavaScript/jQuery scripts out there that will do this for you. This one is pretty old https://github.com/IonDen/ion.checkRadio but I've used it successfully on various projects.

answered Jan 18 '17 at 11:55

Zeb

547
4
15

`You'll struggle to get them all looking the same and cross browser with just CSS`. I can't agree with this - you can do only with css, unless you require support for IE 7 generation browsers – Morpheus Jan 18 '17 at 11:58
Struggles aren't always fruitless ventures :) In the past it's been somewhat of a nightmare to get them to look right in Chrome, IE, Firefox, Opera, Safari as well as iOS and Android browsers. I'd just suck up the overhead and use a script. – Zeb Jan 18 '17 at 12:11

How can I have my checkboxes in a standard format?

2 Answers2