Question

我有这个单选按钮，看起来像http://jsfiddle.net/5cxwL6y7/

问题是外圈虽然圆形不平滑。我的意思是，它可见圆形轮廓不连续并且在其中有空格。

如何在没有空格的情况下使圆形完全圆形。

这是html

<input type='radio' name='a' checked/>
<input type='radio' name='a'/>

这是css3

input[type='radio'] {
    -webkit-appearance:none;
    width:20px;
    height:20px;
    border:1px solid darkgray;
    border-radius:50%;
    outline:none;
    box-shadow:0 0 5px 0px gray inset;
}
input[type='radio']:hover {
    box-shadow:0 0 5px 0px orange inset;
}
input[type='radio']:before {
    content:'';
    display:block;
    width:60%;
    height:60%;
    margin: 20% auto;    
    border-radius:50%;    
}
input[type='radio']:checked:before {
    background:green;
}

Answer 1

将input[type='radio']:before的宽度和高度从百分比更新为固定宽度/高度，它应该没问题，以下是更新后的CSS：

input[type='radio'] {
    -webkit-appearance:none;
    width:20px;
    height:20px;
    border:1px solid darkgray;
    border-radius:50%;
    outline:none;
    box-shadow:0 0 5px 0px gray inset;
}
input[type='radio']:hover {
    box-shadow:0 0 5px 0px orange inset;
}
input[type='radio']:before {
    content:'';
    display:block;
    width:10px; /* updated */
    height:10px; /* updated */
    margin: 20% auto;    
    border-radius:50%;    
}
input[type='radio']:checked:before {
    background:green;
}

Answer 2

请使用以下代码更新您的css：代码

input[type='radio']:before {
    content:'';
    display:block;
    width:100%;
    height:100%;
    /*margin: 20% auto;    */
    border-radius:50%;    
}

＆＃13;

input[type='radio'] {
    -webkit-appearance:none;
    width:20px;
    height:20px;
    border:1px solid darkgray;
    border-radius:50%;
    outline:none;
    box-shadow:0 0 5px 0px gray inset;
}
input[type='radio']:hover {
    box-shadow:0 0 5px 0px orange inset;
}
input[type='radio']:before {
    content:'';
    display:block;
    width:100%;
    height:100%;
    /*margin: 20% auto;    */
    border-radius:50%;    
}
input[type='radio']:checked:before {
    background:green;
}

＆＃13;

<input type='radio' name='a' checked/>
<input type='radio' name='a'/>

＆＃13;

Answer 3

删除边框或调整框阴影，它们看起来不像空格。

Answer 4

<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<style>
body {
  margin: 0;
  padding: 0;
  font-family: 'PT Sans', sans-serif;
  font-size: 1.3em;
  font-weight: bold;
  color: #fff;
}
#first {
  background-color: #4B4D65;
}
#second {
  background-color: #FF8A66;
}
.section {
  padding: 100px;
  padding-left: 150px;
}
.section input[type="radio"],
.section input[type="checkbox"]{
  display: none;
}
.container {
  margin-bottom: 10px;
}
.container label {
  position: relative;
}

/* Base styles for spans */
.container span::before,
.container span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* Radio buttons */
.container span.radio:hover {
  cursor: pointer;
}
.container span.radio::before {
  left: -52px;
  width: 45px;
  height: 25px;
  background-color: #A8AAC1;
  border-radius: 50px;
}
.container span.radio::after {
  left: -49px;
  width: 17px;
  height: 17px;
  border-radius: 10px;
  background-color: #6C788A;
  transition: left .25s, background-color .25s;
}
input[type="radio"]:checked + label span.radio::after {
  left: -27px;
  background-color: #EBFF43;
}

/* Check-boxes */
.container span.checkbox::before {
  width: 27px;
  height: 27px;
  background-color: #fff;
  left: -35px;
  box-sizing: border-box;
  border: 3px solid transparent;
  transition: border-color .2s;
}
.container span.checkbox:hover::before {
  border: 3px solid #F0FF76;
}
.container span.checkbox::after {
  content: '\f00c';
  font-family: 'FontAwesome';
  left: -31px;
  top: 2px;
  color: transparent;
  transition: color .2s;
}
input[type="checkbox"]:checked + label span.checkbox::after {
  color: #62AFFF;
}
</style>
<section id="first" class="section">
    <div class="container">
      <input type="radio" name="group1" id="radio-1">
      <label for="radio-1"><span class="radio">Coffee</span></label>
    </div>
    <div class="container">
      <input type="radio" name="group1" id="radio-2">
      <label for="radio-2"><span class="radio">Tea</span></label>
    </div>
    <div class="container">
      <input type="radio" name="group1" id="radio-3">
      <label for="radio-3"><span class="radio">Cappuccino</span></label>
    </div>
</section>
<section id="second" class="section">
    <div class="container">
      <input type="checkbox" name="group2" id="checkbox-1">
      <label for="checkbox-1"><span class="checkbox">Oranges</span></label>
    </div>
    <div class="container">
      <input type="checkbox" name="group2" id="checkbox-2">
      <label for="checkbox-2"><span class="checkbox">Apples</span></label>
    </div>
    <div class="container">
      <input type="checkbox" name="group2" id="checkbox-3">
      <label for="checkbox-3"><span class="checkbox">Avocados</span></label>
    </div>
</section>

创建一个光滑圆圈的单选按钮

4 个答案: