时间戳

首页 > 解决方案 > 单选按钮后面的垂直线

javascript - 单选按钮后面的垂直线

问题描述

我有一组 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 */
        }

标签： javascripthtmlcssradio-buttoncustomization

解决方案

我会这样做：

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

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

推荐阅读