Question

我一直试图达到这种设计单选按钮设计但没有成功

我正在为我的网站使用bootstrap，但我能达到的就是：

这是我的代码：

.content {background-color: #42d5b9; padding: 50px}

.amount-landing {text-align: center;}
.amount-landing label {color: #FFFFFF;}
.amount-landing > .col-xs-2 {background: url(https://i.imgur.com/K8Nz8Y2.png) repeat-x; background-position: 0 12px;}

.amount-landing input[type="radio"] {
    display:none;
}

.amount-landing input[type="radio"] + label span {
    display:inline-block;
    width:15px;
    height:15px;
    margin:0px 0px 0 0;
    vertical-align:middle;
    background: #FFFFFF;
    cursor:pointer;
    border-radius: 50%;
}

.amount-landing input[type="radio"]:checked + label span {
    background: #101B27;
}

         <div class="content "> 
          <div class="form-group">
            <div class="row amount-landing gray-line">
              <div class="col-xs-2 col-xs-offset-1"><input type="radio"><label for="amount1"><span></span></label></div>
              <div class="col-xs-2"><input type="radio"><label for="amount2"><span></span></label></div>
              <div class="col-xs-2"><input type="radio"><label for="amount3"><span></span></label></div>
              <div class="col-xs-2"><input type="radio"><label for="amount4"><span></span></label></div>
              <div class="col-xs-2"><input type="radio"><label for="amount5"><span></span></label></div>
            </div>
            <!-- This shows radio buttons -->


            <div class="row text-center" style="font-size: 14px;color: #FFFFFF;line-height: 14px;">
              <div class="col-xs-1"></div>
              <div class="col-xs-2">0$</div>
              <div class="col-xs-2">1$<br>-<br>1000$</div>
              <div class="col-xs-2">1001$<br>-<br>2001$</div>
              <div class="col-xs-2">2001$<br>-<br>3000$</div>
              <div class="col-xs-2">More than<br>3000$</div>
              <div class="col-xs-1"></div>
            </div>
            <!-- This shows numbers -->

          </div>
        </div>
        
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

所以，代码基本上是一些带有单选按钮和标签的cols用于制作自定义单选按钮，然后我将灰色线（是img）应用到第一行中的所有cols，以便可以显示背景线但是此方法涵盖了所有列背景;然后在另一行中放入金额标签，当你缩小屏幕时，标签的数量也会相互靠近，这也会产生响应问题。

帮助我很高兴点亮我的道路，谢谢。

Answer 1

为输入类型使用id和name属性=＆＃34; radio＆＃34;。具有相同名称的单选按钮只能用作一个＆＃34;组。＆＃34;无需使用＆＃39; span＆＃39;内部＆＃39;标签＆＃39;。

白色背景线使用CSS pseudo element和＃34;设置样式：＆＃34;。无需使用背景图像。为了避免背景线扩展到最后一个单选按钮之外，制作了内容＆＃34;最后一个div的属性为none。这是使用CSS pseudoclass＆＃34;：last-of-type＆＃34;实现的。

＆＃13;

<NavLink to={`map/${reptile.id}`}>      

<NavLink to={`map/${reptile.id}/${country}`}>

＆＃13;

.content {background-color: #42d5b9; padding: 50px;}

.amount-landing {text-align: center;}
.amount-landing label {color: #FFFFFF;}
.amount-landing .amount-col {
position: relative;}
.amount-landing  .amount-col:after {
content: "";
position:absolute;
width: 100%;
height: 2px;
background-color: #fff;
top: 50%;
}
.amount-landing .amount-col:last-of-type:after {
content: none;
}
.amount-landing input[type="radio"] {
    display:none;
}

.amount-landing input[type="radio"] + label {
    display:inline-block;
    width: 20px;
    height:20px;
    margin:0px 0px 0 0;
    vertical-align:middle;
    background: #FFFFFF;
    cursor:pointer;
    border-radius: 50%;
}

.amount-landing input[type="radio"]:checked + label {
    background: #101B27;
}

＆＃13;

水平收音机Buttom定制设计

1 个答案: