yu.css.ui/css/component/radio.css

纯CSS通用UI模块和组件

.yu-radio {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  font-size: 0;
  color: #606266;
  cursor: pointer;
  margin-right: 8px; }
  .yu-radio > span {
    font-size: 14px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .yu-radio > .radio {
    font-size: 14px;
    transition: border .1s;
    margin-right: 6px;
    margin-bottom: -2px;
    display: inline-block;
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border: 1px solid #DCDFE6;
    border-radius: 50%;
    background-color: #fff; }
    .yu-radio > .radio > input {
      display: none; }
    .yu-radio > .radio:hover {
      border: 1px solid #409EFF; }
  .yu-radio.vertical {
    display: block !important; }
  .yu-radio.checked > .radio {
    width: 16px;
    height: 16px;
    border: 5px solid #409EFF; }
  .yu-radio.disabled {
    color: #C0C4CC; }
    .yu-radio.disabled > .radio:hover {
      border: 1px solid #e7eaef; }
  .yu-radio.checked.disabled > .radio {
    width: 16px;
    height: 16px;
    border: 5px solid #e7eaef; }
    .yu-radio.checked.disabled > .radio + span {
      color: #C0C4CC; }
    .yu-radio.checked.disabled > .radio:hover {
      border: 5px solid #e7eaef; }

.yu-radio-group {
  margin-bottom: 14px; }
  .yu-radio-group.vertical > .yu-radio {
    display: block;
    margin-bottom: 14px; }