自定义单选按钮 - 边框和其中的选定点

Question

任何人都可以建议如何修改单选按钮来更改边框的颜色和选中时的点的颜色（另外，是否可以修改其中的点的大小 - 我不想要一个完整的填充）。

我不想看到方形边框 - 我认为浏览器产生 - 在选择时围绕单选按钮。

Answer 1

下面是一个Codepen正在做你正在寻找的东西。

@import url('http://fonts.googleapis.com/css?family=Lato'); 
 

 
body, html{ 
 
    height: 100%; 
 
    background: #222222; 
 
\t font-family: 'Lato', sans-serif; 
 
} 
 

 
.container{ 
 
    display: block; 
 
    position: absolute; 
 
    margin: auto; 
 
    height: 450px; 
 
    width: 400px; 
 
    bottom: 0; left:0; right: 0; top:0; 
 
    padding: 0; 
 
} 
 

 
h2 { 
 
\t color: #AAAAAA; 
 
\t font-weight: normal; 
 
} 
 

 
.container ul{ 
 
    list-style: none; 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 

 
ul li{ 
 
    color: #AAAAAA; 
 
    display: block; 
 
    position: relative; 
 
    float: left; 
 
    width: 100%; 
 
    height: 100px; 
 
\t border-bottom: 1px solid #111111; 
 
} 
 

 
ul li input[type=radio]{ 
 
    position: absolute; 
 
    visibility: hidden; 
 
} 
 

 
ul li label{ 
 
    display: block; 
 
    position: relative; 
 
    font-weight: 300; 
 
    font-size: 1.35em; 
 
    padding: 25px 25px 25px 80px; 
 
    margin: 10px auto; 
 
    height: 30px; 
 
    z-index: 9; 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.25s linear; 
 
} 
 

 
ul li:hover label{ 
 
\t color: #FFFFFF; 
 
} 
 

 
ul li .check{ 
 
    display: block; 
 
    position: absolute; 
 
    border: 5px solid #AAAAAA; 
 
    border-radius: 100%; 
 
    height: 25px; 
 
    width: 25px; 
 
    top: 30px; 
 
    left: 20px; 
 
\t z-index: 5; 
 
\t transition: border .25s linear; 
 
\t -webkit-transition: border .25s linear; 
 
} 
 

 
ul li:hover .check { 
 
    border: 5px solid #FFFFFF; 
 
} 
 

 
ul li .check::before { 
 
    display: block; 
 
    position: absolute; 
 
\t content: ''; 
 
    border-radius: 100%; 
 
    height: 15px; 
 
    width: 15px; 
 
    top: 5px; 
 
\t left: 5px; 
 
    margin: auto; 
 
\t transition: background 0.25s linear; 
 
\t -webkit-transition: background 0.25s linear; 
 
} 
 

 
input[type=radio]:checked ~ .check { 
 
    border: 5px solid #0DFF92; 
 
} 
 

 
input[type=radio]:checked ~ .check::before{ 
 
    background: #0DFF92; 
 
} 
 

 
input[type=radio]:checked ~ label{ 
 
    color: #0DFF92; 
 
} 
 

 
.signature { 
 
\t position: fixed; 
 
\t margin: auto; 
 
\t bottom: 0; 
 
\t top: auto; 
 
\t width: 100%; 
 
} 
 

 
.signature p{ 
 
\t text-align: center; 
 
\t font-family: Helvetica, Arial, Sans-Serif; 
 
\t font-size: 0.85em; 
 
\t color: #AAAAAA; 
 
} 
 

 
.signature .much-heart{ 
 
\t display: inline-block; 
 
\t position: relative; 
 
\t margin: 0 4px; 
 
\t height: 10px; 
 
\t width: 10px; 
 
\t background: #AC1D3F; 
 
\t border-radius: 4px; 
 
\t -ms-transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 

 
.signature .much-heart::before, 
 
.signature .much-heart::after { 
 
\t display: block; 
 
    content: ''; 
 
    position: absolute; 
 
    margin: auto; 
 
    height: 10px; 
 
    width: 10px; 
 
    border-radius: 5px; 
 
    background: #AC1D3F; 
 
    top: -4px; 
 
} 
 

 
.signature .much-heart::after { 
 
\t bottom: 0; 
 
\t top: auto; 
 
\t left: -4px; 
 
} 
 

 
.signature a { 
 
\t color: #AAAAAA; 
 
\t text-decoration: none; 
 
\t font-weight: bold; 
 
}

<div class="container"> 
 
\t 
 
\t <h2>For dinner I would like to eat:</h2> 
 
\t 
 
    <ul> 
 
    <li> 
 
    <input type="radio" id="f-option" name="selector"> 
 
    <label for="f-option">Pizza</label> 
 
    
 
    <div class="check"></div> 
 
    </li> 
 
    
 
    <li> 
 
    <input type="radio" id="s-option" name="selector"> 
 
    <label for="s-option">Spaghetti</label> 
 
    
 
    <div class="check"><div class="inside"></div></div> 
 
    </li> 
 
    
 
    <li> 
 
    <input type="radio" id="t-option" name="selector"> 
 
    <label for="t-option">Tacos</label> 
 
    
 
    <div class="check"><div class="inside"></div></div> 
 
    </li> 
 
</ul> 
 
</div> 
 

 
<div class="signature"> 
 
\t <p>Made with <i class="much-heart"></i> by <a href="http://codepen.io/AngelaVelasquez">Angela Velasquez</a></p> 
 
</div>

Answer 2

目前还没有办法直接风格单选按钮，高达如何显示在浏览器上。我不确定你使用的是哪种浏览器，但Chrome或FireFox在选择时不会提供边框。但是你仍然可以尝试input[type=radio] { outline:none }将其删除。