自定义无线电字段中的bootstrap和custom css / remove单选按钮

时间:2018-05-16 16:58:14

标签: css twitter-bootstrap

你好我使用bootstrap作为核心css,但也有一个自定义的css文件进行各种修改但是我的自定义无线电字段插入了一个我似乎无法删除的span类。我从哪里开始尝试找到它或使用我的custom.css文件删除它

enter image description here

custom.css

/* pricing switcher */
.pricing-switcher {
    text-align: center;
}

.pricing-switcher .fieldset {
    display: inline-block;
    position: relative;
    padding: 2px;
    border-radius: 50em;
    border: 2px solid #2d3e50;
}

.pricing-switcher input.pricing-input[type="radio"] {
    position: absolute;
    opacity: 0;
}

input.pricing-input[type="radio"] {
  display:none;
    position: absolute;
    opacity: 0;
}

.pricing-switcher label {
    position: relative;
    z-index: 1;
    display: inline-block;
    float: left;
    width: 90px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    font-size: 1.4rem;
    color: #ffffff;
}

.pricing-switcher .switch {
    position: absolute;
    top: 2px;
    left: 2px;
    height: 40px;
    width: 90px;
    background-color: #2d3e50;
    border-radius: 50em;
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    transition: transform 0.5s;
}

.pricing-switcher input.pricing-input[type="radio"]:checked + label + .switch,
.pricing-switcher input.pricing-input[type="radio"]:checked + label:nth-of-type(n) + .switch {
    -webkit-transform: translateX(90px);
    -moz-transform: translateX(90px);
    -ms-transform: translateX(90px);
    -o-transform: translateX(90px);
    transform: translateX(90px);
}

HTML代码

<div class="pricing-switcher">
 <p class="fieldset">
    <input type="radio" name="duration-1" value="monthly" id="monthly-1" class="pricing-input" checked>
    <label for="monthly-1">Per-Use</label>
    <input type="radio" name="duration-1" value="yearly" id="yearly-1" class="pricing-input">
    <label for="yearly-1">Monthly</label>
        <span class="switch"></span>
 </p>
</div>

以下是查看页面的已编译HTML。

<div class="pricing-switcher">    
<p class="fieldset">
    <span class="icons"><span class="first-icon fa fa-circle-o fa-base"></span><span class="second-icon fa fa-dot-circle-o fa-base"></span></span><input type="radio" name="duration-1" value="monthly" id="monthly-1" class="pricing-input" checked="">
    <label for="monthly-1">Per-Use</label>
    <span class="icons"><span class="first-icon fa fa-circle-o fa-base"></span><span class="second-icon fa fa-dot-circle-o fa-base"></span></span><input type="radio" name="duration-1" value="yearly" id="yearly-1" class="pricing-input">
    <label for="yearly-1">Monthly</label>
    <span class="switch"></span>
    </p>
</div>

这是没有原始bootstrap无线电场的情况 https://codepen.io/anon/pen/JvmJdW

0 个答案:

没有答案