css - 无法在检查时更改单选按钮 css 样式

Question

无法检查内部圆样式。选中时应小于外边框圆圈。

   export const RadioWrapper = styled.input`
    border-radius: 50%;
    width: 26px;
    height: 26px;
    border: 1px solid #000000;
    margin-right: 50px;
    background-color: transparent;
    outline: none;
    appearance:none;
    -moz-appearance: none;
    -webkit-appearance: none;
    &:checked{
      background-color: #000000;
      border: .3px solid #000000; 
      transition: background .15s, box-shadow .1s; 
    }
    `;

Answer 1

你可以这样使用after before

input {
border-radius: 50%;
width: 26px;
height: 26px;
border: 1px solid #000000;
margin-right: 50px;
background-color: transparent;
outline: none;
appearance:none;
-moz-appearance: none;
-webkit-appearance: none;    
position: relative;
&:before {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  left: 2px;
  border-radius: 100%;
  transition: background .15s; 
}
&:checked{
  &:before {
    background-color: #000000;      
  }
}

检查这支笔 https://codepen.io/shubhanu-sharma/pen/PooMjvb .

input {
    border-radius: 50%;
    width: 26px;
    height: 26px;
    border: 1px solid #000000;
    margin-right: 50px;
    background-color: transparent;
    outline: none;
    appearance:none;
    -moz-appearance: none;
    -webkit-appearance: none;    
    position: relative;   
}

input:before {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  left: 2px;
  border-radius: 100%;
  transition: background .15s; 
}

input:checked:before{
  background-color: #000000;      
}

<input type="checkbox" />