我正在尝试在后台创建一个基于网络的评分量表，其中包含七个复选框，两个文本标签和一个水平线。它应该类似于paper-based rating scale。另外，我想用一个简短的垂直规则标记中间复选框。
因为复选框似乎很难设置样式，所以我用标签中的文本符号和边框替换它们。我手动将这些复选框和垂直规则放在水平规则上。结果在Firefox中看起来不错，但它似乎并不适用于其他浏览器。在Chrome，IE和Edge中，垂直线不会放在刻度的中心。此外，复选框符号不会在Chrome中居中。
有更好的方法吗？
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>
答案 0 :(得分：1)
而不是尝试使用可能会根据操作系统，字体等改变外观的符号。我会使用另一个伪元素。这样您就可以完全控制外观。
要使用PIL使垂直线居中，这样父级的宽度就无关紧要了，cv2.imread是元素宽度的一半。
left: 50%margin-left: -15px
答案 1 :(得分：1)
因为我喜欢flex，box shadows＆amp;梯度。
通过这种方式，您可以添加所需数量的输入，并且布局将适应。
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>
答案 2 :(得分：0)
pixel值，请在此处使用%，因为它们均匀分布。
.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>