Флажок с символом Unicode для Firefox

Question

Я пытаюсь создать компонент для селекторов (флажки и радио), используя только символы CSS и Unicode в качестве стиля.Вместо стиля по умолчанию.

Я использовал разные юникоды:

Код: https://stackblitz.com/edit/unicode-selectors?file=index.js

Isработает нормально, но не в Firefox (а может и в других браузерах) ...

В Firefox эти символы юникода имеют разный размер и очень некрасивыеМожет кто-нибудь помочь мне решить эту проблему?

В 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

Проблема с 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

Answer 2

Это пара вопросов CSS

Когда у вас есть абсолютное позиционирование тега, его обычно следует заключить в тег с position: relative, и вы всегда должны указывать позицию для экземпляра как top:0; left:0.Вы также можете скрыть фактическую проверку с помощью display: none в качестве высоты: 0;с: 0 не будет работать, как вы ожидаете, в разных браузерах.Это все, что вам нужно сделать, чтобы ваши флажки были совместимы с различными браузерами.