我有来自bootstrap的下拉列表:
我在下拉列表中插入单选按钮但是如果你可以看到dosnt里面的单选按钮有样式,我想在下拉列表中显示单选按钮时颜色相同。
这是来自下拉列表的html:
<div class="btn-group dropdown todos" id="todos">
<button class="btn btn-default dropdown-toggle botn-todos" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Todos
<span class="caret caret-posicion"></span>
</button>
<ul class="dropdown-menu ancho-todos" aria-labelledby="dropdownMenu1">
<li><a href="#" ><input value="1" name="busqueda1" type="radio" class="todoss"><span> Todos</span></a></li>
<li><a href="#"><input value="1" name="busqueda1" type="radio" class="enc"> En camino</a></li>
<li><a href="#"><input value="1" name="busqueda1" type="radio" class="enca"> En camino - 2do intento</a></li>
<li><a href="#"><input value="1" name="busqueda1" type="radio" class="entre"> Entregado</a></li>
<li><a href="#"><input value="1" name="busqueda1" type="radio" class="entre2"> Entregado al 2do intento</a></li>
<li><a href="#"><input value="1" name="busqueda1" type="radio" class="nose"> No se puede entregar</a></li>
<li><a href="#"><input value="1" name="busqueda1" type="radio" class="cancelado"> Cancelado</a></li>
</ul>
</div>
这是我点击项目时的脚本代码:
$('.dropdown-menu').on( 'click', 'a', function() {
var text = $(this).html();
alert(text);
var htmlText = text + ' <span class="caret caret-posicion"></span>';
$(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});
这是每个单选按钮的css:
li:first-child input[type='radio']{
-webkit-appearance:none;
width:15px;
height:15px;
border:3px solid #6a706d;
border-radius:50%;
outline:none;
margin: 0 13px -3px 0;
/*box-shadow:0 0 5px 0px #6a706d inset;*/
}
li:first-child input[type='radio']:before {
content:'';
display:block;
width:60%;
height:60%;
margin: 20% auto;
border-radius:50%;
}
li:first-child input[type='radio']:checked:before {
background:#6a706d;
}
li:nth-child(2) input[type='radio'] {
-webkit-appearance:none;
width:15px;
height:15px;
border:3px solid #f1d04d;
border-radius:50%;
outline:none;
margin: 0 13px -3px 0;
}
li:nth-child(2) input[type='radio']:before {
content:'';
display:block;
width:60%;
height:60%;
margin: 20% auto;
border-radius:50%;
}
li:nth-child(2) input[type='radio']:checked:before{
background:#f1d04d;
}
li:nth-child(3) input[type='radio'] {
-webkit-appearance:none;
width:15px;
height:15px;
border:3px solid #caaf40;
border-radius:50%;
outline:none;
/*box-shadow:0 0 5px 0px #caaf40 inset;*/
margin: 0 13px -3px 0;
}
li:nth-child(3) input[type='radio']:before {
content:'';
display:block;
width:60%;
height:60%;
margin: 20% auto;
border-radius:50%;
}
li:nth-child(3) input[type='radio']:checked:before{
background:#caaf40;
}
li:nth-child(4) input[type='radio'] {
-webkit-appearance:none;
width:15px;
height:15px;
border:3px solid #92d04f;
border-radius:50%;
outline:none;
/*box-shadow:0 0 5px 0px #92d04f inset;*/
margin: 0 13px -3px 0;
}
li:nth-child(4) input[type='radio']:before {
content:'';
display:block;
width:60%;
height:60%;
margin: 20% auto;
border-radius:50%;
}
li:nth-child(4) input[type='radio']:checked:before{
background:#92d04f;
}
li:nth-child(5) input[type='radio'] {
-webkit-appearance:none;
width:15px;
height:15px;
border:3px solid #7aaf42;
border-radius:50%;
outline:none;
/*box-shadow:0 0 5px 0px #7aaf42 inset;*/
margin: 0 13px -3px 0;
}
li:nth-child(5) input[type='radio']:hover {
box-shadow:0 0 5px 0px #7aaf42 inset;
}
li:nth-child(5) input[type='radio']:before {
content:'';
display:block;
width:60%;
height:60%;
margin: 20% auto;
border-radius:50%;
}
li:nth-child(5) input[type='radio']:checked:before{
background:#7aaf42;
}
li:nth-child(6) input[type='radio'] {
-webkit-appearance:none;
width:15px;
height:15px;
border:3px solid #ed5850;
border-radius:50%;
outline:none;
/*box-shadow:0 0 5px 0px #b70218 inset;*/
margin: 0 13px -3px 0;
}
li:nth-child(6) input[type='radio']:before {
content:'';
display:block;
width:60%;
height:60%;
margin: 20% auto;
border-radius:50%;
}
li:nth-child(6) input[type='radio']:checked:before{
background:#ed5850;
}
li:nth-child(7) input[type='radio'] {
-webkit-appearance:none;
width:15px;
height:15px;
border:3px solid #b70218;
border-radius:50%;
outline:none;
/*box-shadow:0 0 5px 0px #b70218 inset;*/
margin: 0 13px -3px 0;
}
li:nth-child(7) input[type='radio']:before {
content:'';
display:block;
width:60%;
height:60%;
margin: 20% auto;
border-radius:50%;
}
li:nth-child(7) input[type='radio']:checked:before{
background:#b70218;
}