radio select 样式修改CSS

实现上述效果的代码，如下

...
<div class=radio>
    <input type="radio" name="deo" id="deo1">
    <label for="deo1"></label>
    <input type="radio" name="deo" id="deo2">
    <label for="deo2"></label>
</div>
...

    .radio input {
        display: none;/*取消默认样式*/
    }   
    .radio input+label {    /*紧接input出现的label，要有相同父元素*/
        display: inline-block;
        position: relative;
        border-radius: 50%;
        border: 1px #aaa solid;
        width: 14px;   /*外圈圆高度、宽度*/
        height: 14px; 
    }
    .radio input+label::after {  /*伪元素制作内部的圆*/
        content: " ";
        border-radius: 50%;
        position: absolute;/*居中方法*/
        top: 50%;
        left: 50%;
        width: 6px; /*中心圆的宽度、高度*/
        height: 6px;
        margin-top: -3px;
        margin-left: -3px;
    }

    .radio input:checked+label {
        background-color: blue;/*选中后外圈圆颜色*/
        border-color: blue;   
    }  
    .radio input:checked+label::after {   
        background-color: white;/*选中radio中心圆的颜色*/
    }

    <select>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="2">3</option>
    <select>

    select::-ms-expand { display: none; }/*IE,将默认的select选择框样式清除*/
    select {
        /*将默认的select选择框样式清除*/
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            background: url("自定义图片.xxx") no-repeat scroll right  center transparent;
            background-size: 18px 26px;
    }