单选按钮后面的垂直线

Question

我有一组7个单选按钮，我需要中间的那个（id=q1val6）后面有一条短的垂直线（以指示likert刻度的零点）。<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;        }我正在尝试在背景中使用彩色div，但它似乎不起作用，也许是因为我有：：before运算符，该运算符位于按钮后面的行中。我更喜欢一个简单的解决方案，而不隐藏按钮本身并用图像替换它们，但如果这是唯一的方法，那么请告诉我。

Answer 1

这是我的新答案，能够在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 2

我会这样做：

<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>

您可以玩弄线条的宽度，颜色甚至渐变，让您心满意足。

Answer 3

也许尝试在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>