See also:
Topic

CSS

Style sheet language
3/18/2020

CSS variables

Using CSS variables.

CSS variables, also known as CSS custom properties, are assigned reusable values such as colors, widths, font families, z-indices, and so on.

Read more
3/16/2020

Line breaks in CSS

How to tune the browser's text wrapping algorithms?

There are five CSS properties that affect how text is split into lines to fill the container: overflow-wrap (word-wrap), word-break, line-break, white-space, hyphenate.

Read more
12/2/2019

Styling native HTML dropdowns

How to style the native HTML dropdown?

The best way to implement an accessible dropdown in HTML is to use the native <select> element.

This is an example of how to style the native <select> element using JSS:

const useStyles = createUseStyles({
    wrapper: {
        position: 'relative'
    },
    invisibleNativeSelect: {
        position: 'absolute',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,

        width: '100%',
        height: '100%',

        opacity: 0
    },
    visibleDropdown: {
        // Styles for the collapsed dropdown
        fontFamily: 'cursive',

        // Styles for the focused collapsed dropdown
        '$invisibleNativeSelect:focus + &': {
            outline: 2
        }
    }
})
Read more