自定义单选字段中的引导和自定义css/remove单选按钮
您好,我使用引导作为核心css,但也有一个自定义css文件进行各种修改,但我的自定义无线电字段插入了一个span类,我似乎无法删除。我从何处开始尝试定位此文件,或使用custom.css文件将其删除 custom.css自定义单选字段中的引导和自定义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
/* 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)。。。掌心!