下拉引导程序内的单选按钮

时间:2016-01-07 23:20:13

标签: javascript jquery html twitter-bootstrap-3

我有来自bootstrap的下拉列表:

enter image description here

我在下拉列表中插入单选按钮但是如果你可以看到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;
    }

0 个答案:

没有答案