自定义单选字段中的引导和自定义css/remove单选按钮

自定义单选字段中的引导和自定义css/remove单选按钮,css,twitter-bootstrap,Css,Twitter Bootstrap,您好,我使用引导作为核心css,但也有一个自定义css文件进行各种修改,但我的自定义无线电字段插入了一个span类,我似乎无法删除。我从何处开始尝试定位此文件,或使用custom.css文件将其删除 custom.css /* pricing switcher */ .pricing-switcher { text-align: center; } .pricing-switcher .fieldset { display: inline-block; positio

您好,我使用引导作为核心css,但也有一个自定义css文件进行各种修改,但我的自定义无线电字段插入了一个span类,我似乎无法删除。我从何处开始尝试定位此文件,或使用custom.css文件将其删除

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>

每次使用 月刊

这就是没有原始引导无线电字段时的外观

你不能用
隐藏元素。pricing switcher.switch{display:none;}
?@crazymatt隐藏自定义开关时无法工作。有关已编译的html,请参见上面的编辑。有一些问题我需要解决。啊,好吧,现在更有意义了。你有一个代码笔或摆弄你的代码的例子吗?这是整个custom.css或有更多的代码,你使用的是哪个版本的引导?弄清楚了。谢谢大家让我的大脑思考。它恰好是一个bootstrap.js文件(bootstrap checkbox radio.js)。。。掌心!