检查时无法更改单选按钮 CSS 样式答案

【问题标题】：Unable to change radio button css styling on check检查时无法更改单选按钮 CSS 样式
【发布时间】：2019-11-28 14:18:17
【问题描述】：

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

   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; 
    }
    `;

【问题讨论】：

请创建sn-p，以便我们为您提供帮助。 :)
查看上面添加的图片
尝试“变换：比例（0.8）；”在：检查
检查时使整个单选按钮变小
我需要您的按钮的完整代码，请创建 sn-p、codepen 或其他东西，以便我们为您提供帮助。 :)

标签： css reactjs styled-components

【解决方案1】：

你可以在这种方式之前使用after

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;      
}

&lt;input type="checkbox" /&gt;

【讨论】：

【解决方案2】：

你可以为选中状态使用伪元素：

&:checked{
  &:after {
      content: "";
      position: absolute;
      width: 20px;
      height: 20px;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      background-color: #000000;
  }
}

记得在按钮上添加position: relative，这样里面的小圆圈就位于它的中心。

【讨论】：

【解决方案3】：

你有一个小错误。您应该添加.attrs({ type: 'checkbox' }) 来定义您正在创建复选框而不是普通输入

export const RadioWrapper = styled.input.attrs({ type: 'checkbox' })`
  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; 
    }
`;

还有working sample

这里是有用的docs 详细信息

【讨论】：