用CSS创建单选按钮的代码是什么

发布时间：2023-10-13 09:58:49 所属栏目：语言来源：

导读：这篇文章主要讲解了“用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;
}
}

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!