用CSS实现单选按钮的代码是什么-群英

上一篇：CSS中单冒号和双冒号分别表示什么，怎样用的下一篇：CSS重置的内容有什么，重置究竟有何用处

这篇文章主要讲解了“用CSS实现单选按钮的代码是什么”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

import React from 'react'
import PropTypes from 'prop-types'
import CX from 'classnames'
import _ from 'lodash'

import './index.less'

function RadioButton(props) {
  const {
    style, title, isChecked, onClick,
  } = props

  const wrapperStyle = _.assign({}, style)

  return (
    <div
      className="checkbox-wrap"
      style={wrapperStyle}
      onClick={onClick}
      role="button"
      tabIndex={0}
    >
      <span
        className={CX({
          checkbox: true,
          checked: isChecked === true,
        })}
      />
      <span className="tip-text">{title}</span>
    </div>
  )
}

RadioButton.propTypes = {
  style: PropTypes.object,
  title: PropTypes.string,
  isChecked: PropTypes.bool,
  onClick: PropTypes.func,
}

RadioButton.defaultProps = {
  style: {},
  title: '',
  isChecked: false,
  onClick: _.noop,
}

export default RadioButton

下面是组件样式

.checkbox-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 3px 0;
  margin-right: 24px;
  cursor: pointer;

  .checkbox {
    display: inline-block;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(79, 159, 255, 1);
    position: relative;

    &.checked {
      &::before {
        content: '';
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #56afff;
        position: absolute;
        top: 1px;
        left: 1px;
      }
    }
  }
  .tip-text {
    opacity: 0.4;
    line-height: 18px;
    margin-left: 3px;
  }
}