Is it possible to change the color of selected radio button's center circle

前端 未结 3 2178
既然无缘
既然无缘 2020-12-13 10:49

Is it possible to style the center circle of a selected radio button, at least in webkit browsers…?

What I have now:

3条回答
  •  眼角桃花
    2020-12-13 11:38

    You can bind radio-button to label, than you can hide radio-button and style label whatever you like. Example.

    div {
        background-color: #444444;
        display: flex-column;
        display:webkit-flex-column;
    }
    input {
        margin: 10px;
        position: absolute;
        left: 100px;
    }
    label {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        margin: 10px;
        display: block;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        background-color: #ffffff;
        box-shadow: inset 1px 0 #000000;
    }
    #green {
       border: 8px solid green;
    }
    #red {
        border: 8px solid red;
    }
    input:checked + #green {
        border: 8px solid #ffffff;
        background-color:green !important;
    }
    input:checked + #red {
        border: 8px solid #ffffff;
        background-color: red !important;
    }
    Click a button on the left - radio button on the right will be checked.
    

提交回复
热议问题