Place checkboxes on a horizontal rule with HTML/CSS - html

Question

I am trying to create a web-based rating scale with seven checkboxes, two text labels and a horizontal rule in the background. It should look similar to a paper-based rating scale. In addition, I would like to mark the middle checkbox by a short vertical rule.
Because checkboxes seem to be quite difficult to style, I replaced them by a text symbol and a border in the labels. I manually positioned these checkboxes and the vertical rule on the horizontal rule. The result looks ok in Firefox but it doesn't seem to work for other browsers. In Chrome, IE and Edge, the vertical line is not placed in the center of the scale. Additionally, the checkbox symbol is not centered in Chrome.
Is there a better way to do this?
https://jsfiddle.net/tzuyya36/1/
input[type="radio"] {
display: none;
}
input[type="radio"]+label:before {
font: 12px/16px sans-serif;
text-align: center;
vertical-align: middle;
content: "\00a0";
width: 16px;
height: 16px;
margin: 0;
padding: 0;
position: absolute;
border: 2px solid #8b8d8e;
background: #ffffff;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
display: inline-block;
}
input[type="radio"]:checked+label:before {
content: "\26ab";
}
label.scale1 {
cursor: pointer;
margin: 0;
position: absolute;
left: -8px;
}
label.scale2 {
cursor: pointer;
margin: 0;
position: absolute;
left: 82px;
}
label.scale3 {
cursor: pointer;
margin: 0;
position: absolute;
left: 172px;
}
label.scale4 {
cursor: pointer;
margin: 0;
position: absolute;
left: 262px;
}
label.scale5 {
cursor: pointer;
margin: 0;
position: absolute;
left: 352px;
}
label.scale6 {
cursor: pointer;
margin: 0;
position: absolute;
left: 442px;
}
label.scale7 {
cursor: pointer;
margin: 0;
position: absolute;
left: 532px;
}
div.scale {
margin: 20px auto;
width: 540px;
height: 16px;
position: relative;
}
div.leftLabel {
text-align: right;
width: 100px;
position: absolute;
left: -120px;
}
div.rightLabel {
text-align: left;
width: 100px;
position: absolute;
left: 560px;
}
hr.horizontal {
width: 100%;
position: absolute;
border: 2px solid #8b8d8e;
}
hr.vertical {
width: 30px;
position: absolute;
left: 257px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
border: 2px solid #8b8d8e;
}
<form>
<div class="scale">
<hr class="horizontal">
<hr class="vertical">
<div class="leftLabel">low</div>
<input type="radio" name="test" id="test1" value="1"><label for="test1" class="scale1"></label>
<input type="radio" name="test" id="test2" value="2"><label for="test2" class="scale2"></label>
<input type="radio" name="test" id="test3" value="3"><label for="test3" class="scale3"></label>
<input type="radio" name="test" id="test4" value="4"><label for="test4" class="scale4"></label>
<input type="radio" name="test" id="test5" value="5"><label for="test5" class="scale5"></label>
<input type="radio" name="test" id="test6" value="6"><label for="test6" class="scale6"></label>
<input type="radio" name="test" id="test7" value="7"><label for="test7" class="scale7"></label>
<div class="rightLabel">high</div>
</div>
</form>

Answer 1

Instead of trying to use a symbol which may change in appearance depending on operating system, font etc. I would use another pseudo element. This way you have complete control over the appearance.
To centre the vertical line you would use left: 50%, this way the width of parent is irrelevant, and margin-left: -15px, half the width of the element.
input[type="radio"] {
display: none;
}
input[type="radio"]+label:before {
font: 12px/16px sans-serif;
text-align: center;
vertical-align: middle;
content: "\00a0";
width: 16px;
height: 16px;
margin: 0;
padding: 0;
position: absolute;
border: 2px solid #8b8d8e;
background: #ffffff;
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
display: inline-block;
}
input[type="radio"]:checked+label:after {
content: "";
width: 12px;
height: 12px;
margin: 4px;
position: absolute;
background: #FF0000;
border-radius: 50%;
}
label.scale1 {
cursor: pointer;
margin: 0;
position: absolute;
left: -8px;
}
label.scale2 {
cursor: pointer;
margin: 0;
position: absolute;
left: 82px;
}
label.scale3 {
cursor: pointer;
margin: 0;
position: absolute;
left: 172px;
}
label.scale4 {
cursor: pointer;
margin: 0;
position: absolute;
left: 262px;
}
label.scale5 {
cursor: pointer;
margin: 0;
position: absolute;
left: 352px;
}
label.scale6 {
cursor: pointer;
margin: 0;
position: absolute;
left: 442px;
}
label.scale7 {
cursor: pointer;
margin: 0;
position: absolute;
left: 532px;
}
div.scale {
margin: 20px auto;
width: 540px;
height: 16px;
position: relative;
}
div.leftLabel {
text-align: right;
width: 100px;
position: absolute;
left: -120px;
}
div.rightLabel {
text-align: left;
width: 100px;
position: absolute;
left: 560px;
}
hr.horizontal {
width: 100%;
position: absolute;
border: 2px solid #8b8d8e;
}
hr.vertical {
height: 30px;
position: absolute;
top: -15px;
left: 50%;
border: 2px solid #8b8d8e;
}
<form>
<div class="scale">
<hr class="horizontal">
<hr class="vertical">
<div class="leftLabel">low</div>
<input type="radio" name="test" id="test1" value="1"><label for="test1" class="scale1"></label>
<input type="radio" name="test" id="test2" value="2"><label for="test2" class="scale2"></label>
<input type="radio" name="test" id="test3" value="3"><label for="test3" class="scale3"></label>
<input type="radio" name="test" id="test4" value="4"><label for="test4" class="scale4"></label>
<input type="radio" name="test" id="test5" value="5"><label for="test5" class="scale5"></label>
<input type="radio" name="test" id="test6" value="6"><label for="test6" class="scale6"></label>
<input type="radio" name="test" id="test7" value="7"><label for="test7" class="scale7"></label>
<div class="rightLabel">high</div>
</div>
</form>

Answer 2

because I like flex, box shadows & gradients.
This way you can add as many inputs you want and the layout will adapt.
form {
display: flex;
}
form > div {
margin: 0 10px;
padding: 10px 0;
}
.scale {
width: 100%;
display: flex;
/* Centering the labels */
justify-content: space-between;
/* Adding the background gray line */
background:linear-gradient(transparent 45%, gray 45%, gray 55%, transparent 55%);
position: relative;
}
/* vertical rule */
.scale::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 4px;
left: 50%;
margin-left: -2px;
background: gray;
z-index: -1;
}
input {
display:none;
}
/* Direct styling of the labels as UTF8 icons can be inconsistent across browsers */
label{
display:block;
width:20px;
height: 20px;
background-color: white;
border: 2px solid gray;
border-radius: 100%;
}
input:checked+label {
/* Inset box-shadows can be used to create additional borders */
box-shadow: inset 0 0 0 2px white;
background-color: gray;
}
<form>
<div>low</div>
<div class="scale">
<input type="radio" name="test" id="test1"><label for="test1"></label>
<input type="radio" name="test" id="test2" checked><label for="test2"></label>
<input type="radio" name="test" id="test3"><label for="test3"></label>
<input type="radio" name="test" id="test4"><label for="test4"></label>
<input type="radio" name="test" id="test5"><label for="test5"></label>
</div>
<div>high</div>
</form>

Answer 3

Don't use hard-coded pixel values, use % here as they are uniformly distributed.
Make 3 divisions. Left label, right label and middle scale. Middle scale is the main focus and left right labels can be done separately.
.scaleContainer {
position: relative;
width: 100%;
}
div.horizontal {
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 3px;
background-color: gray;
position: absolute;
}
div.vertical {
width: 2px;
height: 20px;
background-color: gray;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input[type="radio"] {
margin: 0;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
input[type="radio"]:nth-of-type(1) {
left: calc(100% * 0 / 6)
}
input[type="radio"]:nth-of-type(2) {
left: calc(100% * 1 / 6)
}
input[type="radio"]:nth-of-type(3) {
left: calc(100% * 2 / 6)
}
input[type="radio"]:nth-of-type(4) {
left: calc(100% * 3 / 6)
}
input[type="radio"]:nth-of-type(5) {
left: calc(100% * 4 / 6)
}
input[type="radio"]:nth-of-type(6) {
left: calc(100% * 5 / 6)
}
input[type="radio"]:nth-of-type(7) {
left: calc(100% * 6 / 6)
}
.scale>div {
display: table-cell;
}
.scale>div:first-child,
.scale>div:last-child {
padding: 10px;
}
<form>
<div class="scale">
<div class="leftLabel">low</div>
<div class="scaleContainer">
<div class="horizontal"></div>
<div class="vertical"></div>
<input type="radio" value="1">
<input type="radio" value="2">
<input type="radio" value="3">
<input type="radio" value="4">
<input type="radio" value="5">
<input type="radio" value="6">
<input type="radio" value="7">
</div>
<div class="rightLabel">high</div>
</div>
</form>