单选按钮后面的垂直线

Question

我有一组 7 个单选按钮，我需要中间的那个 (id=q1val6) 在它后面有一条短垂直线（表示李克特量表的零点）。

<form name="form1" action="#" onsubmit="jsPsych.finishTrial()" method="post"> 
<div class="likertline0">
<input class="radio" style="display:inline"  type="radio" id="q1val3" name="q1" value="-3"/>
<input class="radio" style="display:inline"  type="radio" id="q1val4" name="q1" value="-2"/>
<input class="radio" style="display:inline"  type="radio" id="q1val5" name="q1" value="-1"/>
<input class="radio" style="display:inline"  type="radio" checked id="q1val6" name="q1" value="0"/>
<input class="radio" style="display:inline"  type="radio" id="q1val7" name="q1" value="1"/>
<input class="radio" style="display:inline"  type="radio" id="q1val8" name="q1" value="2"/>
<input class="radio" style="display:inline"  type="radio" id="q1val9" name="q1" value="3"/>
 </form>

CSS:
        .likertline0:before {
            content: '';
            position: relative;
            top: 16px;
            display: block;
            z-index: -1;
            left: 4%;
            background-color: gray;
            height: 4px;
            align-items: center;
            width: 93%;
        }

        .radio {
            display: none;
            width: 20px;
            margin: 0 10px 0 10px;
            /* this is a green */
        }


        .radio input[type='radio'] {
            display: none;
        }

        .radio label {
            color: #666;
            font-weight: normal;
        }

        .radiolabel:before {
            content: " ";
            display: inline-block;
            position: relative;
            top: 5px;
            margin: 0 5px 0 0;
            width: 20px;
            height: 20px;
            border-radius: 11px;
            border: 2px solid #004c97;
            background-color: transparent;
        }

        .radio input[type=radio]:checked+label:after {
            border-radius: 11px;
            width: 12px;
            height: 12px;
            position: absolute;
            top: 9px;
            left: 10px;
            content: " ";
            display: block;
            background: #004c97;
        }

我正在尝试在背景中使用彩色 div，但它似乎不起作用，可能是因为我有 ::before 运算符用于按钮后面的行。我更喜欢一个简单的解决方案，而不是隐藏按钮本身并用图像替换它们，但如果这是唯一的方法，请告诉我。

编辑：我刚刚意识到 CSS 部分不正确，我把不相关的东西放在那里，CSS 应该只是这样的：

  .likertline0:before {
            content: '';
            position: relative;
            top: 16px;
            display: block;
            z-index: -1;
            left: 4%;
            background-color: gray;
            height: 4px;
            align-items: center;
            width: 93%;
        }

        .radio {
            display: none;
            width: 20px;
            margin: 0 10px 0 10px;
            /* this is a green */
        }

Answer 1

也许可以尝试调用 CSS 中特定单选按钮的 ID 而不是组。像这样：

#q1val6:before {
                content: '';
            position: relative;
            top: 16px;
            display: block;
            z-index: -1;
            left: 4%;
            background-color: gray;
            height: 4px;
            align-items: center;
            width: 93%;  
        }

示例如下：

#q1val6:before {
            content: '';
            position: relative;
            top: 16px;
            display: block;
            z-index: -1;
            left: 4%;
            background-color: gray;
            height: 4px;
            align-items: center;
            width: 93%;
            
        }


        .radio {
            display: none;
            width: 20px;
            margin: 0 10px 0 10px;
            /* this is a green */
        }


        .radio input[type='radio'] {
            display: none;
        }

        .radio label {
            color: #666;
            font-weight: normal;
        }

        .radiolabel:before {
            content: " ";
            display: inline-block;
            position: relative;
            top: 5px;
            margin: 0 5px 0 0;
            width: 20px;
            height: 20px;
            border-radius: 11px;
            border: 2px solid #004c97;
            background-color: transparent;
        }

        .radio input[type=radio]:checked+label:after {
            border-radius: 11px;
            width: 12px;
            height: 12px;
            position: absolute;
            top: 9px;
            left: 10px;
            content: " ";
            display: block;
            background: #004c97;
        }

<form name="form1" action="#" onsubmit="jsPsych.finishTrial()" method="post"> 
<div class="likertline0">
<input class="radio" style="display:inline"  type="radio" id="q1val3" name="q1" value="-3"/>
<input class="radio" style="display:inline"  type="radio" id="q1val4" name="q1" value="-2"/>
<input class="radio" style="display:inline"  type="radio" id="q1val5" name="q1" value="-1"/>
<input class="radio" style="display:inline"  type="radio" checked id="q1val6" name="q1" value="0"/>
<input class="radio" style="display:inline"  type="radio" id="q1val7" name="q1" value="1"/>
<input class="radio" style="display:inline"  type="radio" id="q1val8" name="q1" value="2"/>
<input class="radio" style="display:inline"  type="radio" id="q1val9" name="q1" value="3"/>
 </form>

Answer 2

这是我的新答案，可以在 firefox 中显示。

.likertline0:before {
            content: '';
            position: relative;
            top: 43px;
            display: inline-block;
            z-index: -1;
            background-color: gray;
            height: 4px;
            align-items: center;
            left: 15px;
            width: 265px;
        }

.vline:before {
            content: '';
            position: relative;
            top: 22px;
            display: block;
            z-index: -2;
            left: 149px;
            background-color: gray;
            height: 30px;
            align-items: center;
            width: 4px;
}
        
        
        .radio {
            display: none;
            width: 20px;
            margin: 0 10px 0 10px;
            /* this is a green */
        }


        .radio input[type='radio'] {
            display: none;
        }

        .radio label {
            color: #666;
            font-weight: normal;
        }

        .radiolabel:before {
            content: " ";
            display: inline-block;
            position: relative;
            top: 5px;
            margin: 0 5px 0 0;
            width: 20px;
            height: 20px;
            border-radius: 11px;
            border: 2px solid #004c97;
            background-color: transparent;
        }

        .radio input[type=radio]:checked+label:after {
            border-radius: 11px;
            width: 12px;
            height: 12px;
            position: absolute;
            top: 9px;
            left: 10px;
            content: " ";
            display: block;
            background: #004c97;
        }

<form name="form1" action="#" onsubmit="jsPsych.finishTrial()" method="post"> 
<div class="likertline0">
<div class="vline">
<input class="radio" style="display:inline"  type="radio" id="q1val3" name="q1" value="-3"/>
<input class="radio" style="display:inline"  type="radio" id="q1val4" name="q1" value="-2"/>
<input class="radio" style="display:inline"  type="radio" id="q1val5" name="q1" value="-1"/>
<input class="radio" style="display:inline"  type="radio" checked id="q1val6" name="q1" value="0"/>
<input class="radio" style="display:inline"  type="radio" id="q1val7" name="q1" value="1"/>
<input class="radio" style="display:inline"  type="radio" id="q1val8" name="q1" value="2"/>
<input class="radio" style="display:inline"  type="radio" id="q1val9" name="q1" value="3"/>
</div>
</div>
 </form>

Answer 3

我会这样做：

<html>
<head>
<style>
 .centre {
    background-image: linear-gradient(to right, 
      #ffffff,
      #ffffff 45%,
      #aaaaaa 45%,
      #aaaaaa 55%,
      #ffffff 55%);
 }

 .radio {
      display: none;
      width: 20px;
      margin: 0 10px 0 10px;
 }
</style>
</head>
<body>

<form name="form1" action="#" onsubmit="jsPsych.finishTrial()" method="post"> 
<div class="likertline0">
<input class="radio" style="display:inline"  type="radio" id="q1val3" name="q1" value="-3"/>
<input class="radio" style="display:inline"  type="radio" id="q1val4" name="q1" value="-2"/>
<input class="radio" style="display:inline"  type="radio" id="q1val5" name="q1" value="-1"/>
<span class="centre"><input class="radio" style="display:inline"  type="radio" checked id="q1val6" name="q1" value="0"/></span>
<input class="radio" style="display:inline"  type="radio" id="q1val7" name="q1" value="1"/>
<input class="radio" style="display:inline"  type="radio" id="q1val8" name="q1" value="2"/>
<input class="radio" style="display:inline"  type="radio" id="q1val9" name="q1" value="3"/>
 </form>
</body>
</html>

您可以随心所欲地调整线条的宽度、颜色甚至渐变。

单选按钮后面的垂直线

Vertical line behind radio button

html

javascript

css

customization

radio-button