带有Unicode符号的Firefox复选框

Question

我正在尝试使用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>

非常感谢您的帮助！

Answer 1

有两个CSS问题

当标签具有绝对位置时，通常应使用position: relative将其包装到标签中，并且应始终将每个实例的位置指定为top:0; left:0。您还可以使用display: none作为height：0来隐藏实际的支票； with：0在其他浏览器中无法正常工作。您要做的就是使复选框与不同的浏览器兼容。

Answer 2

Firefox的问题是font-family: system-ui。相反，将这些字体家族与所有相应的后备使用结合起来可以正常工作：

font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

工作代码在这里：

• https://stackblitz.com/edit/unicode-selectors-vezpvs?file=Selector%2Fstyles.scss