我正在尝试使用css和unicode符号作为样式来制作选择器组件(复选框和单选按钮)。而不是默认样式。
我使用了不同的unicode:
代码:https://stackblitz.com/edit/unicode-selectors?file=index.js
工作正常,但不能在Firefox(以及其他浏览器)中使用...
在Firefox中,这些unicode符号的大小不同并且非常丑陋。有人可以帮我解决这个问题吗?
在Firefox中:
代码如下:
https://stackblitz.com/edit/unicode-selectors?file=index.js
选择器组件
import React from 'react'
import PropTypes from 'prop-types'
import './styles.scss'
export default function Selector({
id, children, labelProps, selectorType, ...props
}) {
const labelClassName = labelProps.className
const selector = (
<>
<input
className={`${selectorType}-hidden`}
id={id}
type={selectorType}
{...props}
/>
<span className="mask" />
</>
)
/* eslint-disable jsx-a11y/label-has-for */
return (
<label
htmlFor={id}
{...labelProps}
className={`${selectorType}-selector ${labelClassName}`}
>
{children ? children(selector) : selector}
</label>
)
/* eslint-enable jsx-a11y/label-has-for */
}
Selector.propTypes = {
id: PropTypes.string.isRequired,
labelProps: PropTypes.objectOf(PropTypes.any),
children: PropTypes.func,
selectorType: PropTypes.oneOf(['radio', 'checkbox']),
}
Selector.defaultProps = {
labelProps: {},
children: undefined,
selectorType: 'radio',
}
样式
.radio-selector, .checkbox-selector {
cursor: pointer;
min-width: 16px;
min-height: 16px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.radio-hidden, .checkbox-hidden {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.mask {
width: 16px;
height: 16px;
&.margin-left {
margin-left: 10px
}
&.margin-right {
margin-right: 10px
}
}
}
.radio-selector {
.radio-hidden ~ .mask::before {
font-family: system-ui;
content: '◯';
font-size: 15px;
}
.radio-hidden:checked ~ .mask::before {
font-family: system-ui;
content: '◉';
font-size: 15px;
}
.radio-hidden:disabled ~.mask::before {
color: #b6b6b6;
cursor: default;
}
&:hover .radio-hidden:not(:disabled):not(:checked) ~ .mask::before {
color: #dd7758;
}
}
.checkbox-selector {
.checkbox-hidden ~ .mask::before {
font-family: system-ui;
content: '□';
font-size: 17px;
}
.checkbox-hidden:checked ~ .mask::before {
font-family: system-ui;
content: '■';
font-size: 17px;
}
.checkbox-hidden:checked ~ .mask::after {
font-family: system-ui;
content: '\2713';
color: #fff;
height: 15px;
width: 15px;
font-weight: 100;
position: absolute;
font-size: 13px;
text-align: center;
margin: 1px 0 0 -15px;
}
.checkbox-hidden:disabled ~.mask::before {
color: #b6b6b6;
cursor: default;
}
&:hover .checkbox-hidden:not(:disabled):not(:checked) ~ .mask::before {
color: #dd7758;
}
}
用法
<Selector defaultChecked selectorType="checkbox">
{
selector => (
<>
{selector}
{` Check me`}
</>
)
}
</Selector>
非常感谢您的帮助!
答案 0 :(得分:2)
有两个CSS问题
当标签具有绝对位置时,通常应使用position: relative
将其包装到标签中,并且应始终将每个实例的位置指定为top:0; left:0
。您还可以使用display: none
作为height:0来隐藏实际的支票; with:0在其他浏览器中无法正常工作。您要做的就是使复选框与不同的浏览器兼容。
答案 1 :(得分:0)
Firefox的问题是font-family: system-ui
。相反,将这些字体家族与所有相应的后备使用结合起来可以正常工作:
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
工作代码在这里: