I have been experimenting with creating a Component for Selectors (checkboxes and radios) using just css and unicode symbols as the style, rather than the default styling.
Here are some of the unicode symbols I have used:
https://i.sstatic.net/7haCW.png
If you want to check out the code, you can view it here: https://stackblitz.com/edit/unicode-selectors?file=index.js
Although everything seems to be working fine, there is an issue in Firefox (and possibly other browsers)...
In Firefox, these unicode symbols appear distorted and of different sizes, making them look very unattractive. Can anyone offer assistance on how to resolve this issue?
Here is how it looks in Firefox:
https://i.sstatic.net/umVpJ.png
To access the code directly, click here: 💻https://stackblitz.com/edit/unicode-selectors?file=index.js
Selector Component
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',
}
Styles
.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;
}
}
Usage
<Selector defaultChecked selectorType="checkbox">
{
selector => (
<>
{selector}
{` Check me`}
</>
)
}
</Selector>
Your assistance in resolving this matter would be greatly appreciated!