水平收音机Buttom定制设计

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

使用输入类型="radio"的id和name属性.具有相同名称的单选按钮只能用作一个"组".无需在'标签'中使用'span'.

白色背景线使用CSS 伪元素 ":after"设置样式.无需使用背景图像.为了避免背景线扩展超出最后一个单选按钮,将最后一个div的"content"属性设置为none.这是使用CSS 伪类 ":last-of-type"实现的.

.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;
}

<div class="content "> 
          <div class="form-group">
            <div class="row amount-landing gray-line">
              <div class="col-xs-2 col-xs-offset-1 amount-col"><input type="radio" id="amount1" name="amount"><label for="amount1"></label></div>
              <div class="col-xs-2 amount-col"><input type="radio" id="amount2" name="amount"><label for="amount2"></label></div>
              <div class="col-xs-2 amount-col"><input type="radio" id="amount3" name="amount"><label for="amount3"></label></div>
              <div class="col-xs-2 amount-col"><input type="radio" id="amount4" name="amount"><label for="amount4"></label></div>
              <div class="col-xs-2 amount-col"><input type="radio" id="amount5" name="amount"><label for="amount5"></label></div>
            </div>
            <!-- This shows radio buttons -->


            <div class="row text-center" style="font-size: 13px;color: #FFFFFF;line-height: 15px;">
              <div class="col-xs-1"></div>
              <div class="col-xs-2">0$</div>
              <div class="col-xs-2">1$-1000$</div>
              <div class="col-xs-2">1001$-2001$</div>
              <div class="col-xs-2">2001$-3000$</div>
              <div class="col-xs-2">More than 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">