Skip to content
This repository has been archived by the owner on Sep 11, 2021. It is now read-only.

Styling checkboxes directly in IE #6

Merged
merged 1 commit into from
May 23, 2019
Merged

Styling checkboxes directly in IE #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 15 additions & 106 deletions docs/pages/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,49 +130,9 @@ instead.

## Checkbox

Create a custom checkbox by adding a `span` with the `form-checkbox` class next to an
`input[type=checkbox]`.

Hide the real checkbox element using the `sr-only` class, and hide the span from screen readers
using `aria-hidden`.

Control the layout of the checkbox and label however you like — the `form-checkbox` class doesn't
impose any opinions in that regard. Here we've used flexbox to center the checkbox with the label.

<CodeSample code={`
<div class="block">
<span class="text-gray-700">Checkboxes</span>
<div class="mt-2">
<div>
<label class="inline-flex items-center">
<input type="checkbox" class="sr-only" checked/>
<span class="form-checkbox text-gray-800" aria-hidden="true"></span>
<span class="ml-2">Option 1</span>
</label>
</div>
<div>
<label class="inline-flex items-center">
<input type="checkbox" class="sr-only"/>
<span class="form-checkbox text-gray-800" aria-hidden="true"></span>
<span class="ml-2">Option 2</span>
</label>
</div>
<div>
<label class="inline-flex items-center">
<input type="checkbox" class="sr-only"/>
<span class="form-checkbox text-gray-800" aria-hidden="true"></span>
<span class="ml-2">Option 3</span>
</label>
</div>
</div>
</div>
`}/>

### Styling checkboxes directly (No IE 11 support)

If you only need to support Edge and not IE 11, you can also add the `form-checkbox` class to
`input[type=checkbox]` elements directly and avoid the extra presentational `span` element.

<CodeSample code={`
<div class="block">
<span class="text-gray-700">Checkboxes</span>
Expand Down Expand Up @@ -210,22 +170,19 @@ color utilities, like `text-indigo-600`.
<div class="mt-2">
<div>
<label class="inline-flex items-center">
<input type="checkbox" class="sr-only" checked/>
<span class="form-checkbox text-indigo-600" aria-hidden="true"></span>
<input type="checkbox" class="form-checkbox text-indigo-600" checked/>
<span class="ml-2">Option 1</span>
</label>
</div>
<div>
<label class="inline-flex items-center">
<input type="checkbox" class="sr-only" checked/>
<span class="form-checkbox text-blue-500" aria-hidden="true"></span>
<input type="checkbox" class="form-checkbox text-blue-500" checked/>
<span class="ml-2">Option 2</span>
</label>
</div>
<div>
<label class="inline-flex items-center">
<input type="checkbox" class="sr-only" checked/>
<span class="form-checkbox text-pink-600" aria-hidden="true"></span>
<input type="checkbox" class="form-checkbox text-pink-600" checked/>
<span class="ml-2">Option 3</span>
</label>
</div>
Expand All @@ -244,22 +201,19 @@ use Tailwind's width and height utilities, like `h-6` and `w-6`.
<div class="mt-2">
<div>
<label class="inline-flex items-center">
<input type="checkbox" class="sr-only" checked/>
<span class="form-checkbox h-4 w-4 text-gray-800" aria-hidden="true"></span>
<input type="checkbox" class="form-checkbox h-4 w-4 text-gray-800" checked/>
<span class="ml-2">Option 1</span>
</label>
</div>
<div class="mt-1">
<label class="inline-flex items-center">
<input type="checkbox" class="sr-only"/>
<span class="form-checkbox h-6 w-6 text-gray-800" aria-hidden="true"></span>
<input type="checkbox" class="form-checkbox h-6 w-6 text-gray-800"/>
<span class="ml-3 text-lg">Option 2</span>
</label>
</div>
<div class="mt-1">
<label class="inline-flex items-center">
<input type="checkbox" class="sr-only"/>
<span class="form-checkbox h-8 w-8 text-gray-800" aria-hidden="true"></span>
<input type="checkbox" class="form-checkbox h-8 w-8 text-gray-800"/>
<span class="ml-4 text-xl">Option 3</span>
</label>
</div>
Expand All @@ -271,12 +225,6 @@ use Tailwind's width and height utilities, like `h-6` and `w-6`.

## Radio Button

Create a custom radio button by adding a `span` with the `form-radio` class next to an
`input[type=radio]`.

Hide the real radio button using the `sr-only` class, and hide the span from screen readers
using `aria-hidden`.

Control the layout of the radio button and label however you like — the `form-radio` class doesn't
impose any opinions in that regard. Here we've used flexbox to center the radio button with the label.

Expand All @@ -286,59 +234,26 @@ impose any opinions in that regard. Here we've used flexbox to center the radio
<div class="mt-2">
<div>
<label class="inline-flex items-center">
<input type="radio" class="sr-only" name="radio" value="1" checked/>
<span class="form-radio text-gray-800" aria-hidden="true"></span>
<input type="radio" class="form-radio text-gray-800" name="radio" value="1" checked/>
<span class="ml-2">Option 1</span>
</label>
</div>
<div>
<label class="inline-flex items-center">
<input type="radio" class="sr-only" name="radio" value="2"/>
<span class="form-radio text-gray-800" aria-hidden="true"></span>
<input type="radio" class="form-radio text-gray-800" name="radio" value="2"/>
<span class="ml-2">Option 2</span>
</label>
</div>
<div>
<label class="inline-flex items-center">
<input type="radio" class="sr-only" name="radio" value="3"/>
<span class="form-radio text-gray-800" aria-hidden="true"></span>
<input type="radio" class="form-radio text-gray-800" name="radio" value="3"/>
<span class="ml-2">Option 3</span>
</label>
</div>
</div>
</div>
`}/>

### Styling radio buttons directly (No IE 11 support)

If you only need to support Edge and not IE 11, you can also add the `form-checkbox` class to
`input[type=checkbox]` elements directly and avoid the extra presentational `span` element.

<CodeSample code={`
<div class="block">
<span class="text-gray-700">Radio Buttons</span>
<div class="mt-2">
<div>
<label class="inline-flex items-center">
<input type="radio" class="form-radio text-gray-800" name="radio-direct" value="1" checked/>
<span class="ml-2">Option 1</span>
</label>
</div>
<div>
<label class="inline-flex items-center">
<input type="radio" class="form-radio text-gray-800" name="radio-direct" value="2"/>
<span class="ml-2">Option 2</span>
</label>
</div>
<div>
<label class="inline-flex items-center">
<input type="radio" class="form-radio text-gray-800" name="radio-direct" value="3"/>
<span class="ml-2">Option 3</span>
</label>
</div>
</div>
</div>
`}/>

### Changing the color

Expand All @@ -351,22 +266,19 @@ color utilities, like `text-indigo-600`.
<div class="mt-2">
<div>
<label class="inline-flex items-center">
<input type="radio" class="sr-only" name="radio-colors" value="1" checked/>
<span class="form-radio text-indigo-600" aria-hidden="true"></span>
<input type="radio" class="form-radio text-indigo-600" name="radio-colors" value="1" checked/>
<span class="ml-2">Option 1</span>
</label>
</div>
<div>
<label class="inline-flex items-center">
<input type="radio" class="sr-only" name="radio-colors" value="2"/>
<span class="form-radio text-blue-500" aria-hidden="true"></span>
<input type="radio" class="form-radio text-blue-500" name="radio-colors" value="2"/>
<span class="ml-2">Option 2</span>
</label>
</div>
<div>
<label class="inline-flex items-center">
<input type="radio" class="sr-only" name="radio-colors" value="3"/>
<span class="form-radio text-pink-600" aria-hidden="true"></span>
<input type="radio" class="form-radio text-pink-600" name="radio-colors" value="3"/>
<span class="ml-2">Option 3</span>
</label>
</div>
Expand All @@ -385,22 +297,19 @@ use Tailwind's width and height utilities, like `h-6` and `w-6`.
<div class="mt-2">
<div>
<label class="inline-flex items-center">
<input type="radio" class="sr-only" name="radio-sizes" value="1" checked/>
<span class="form-radio h-4 w-4 text-gray-800" aria-hidden="true"></span>
<input type="radio" class="form-radio h-4 w-4 text-gray-800" name="radio-sizes" value="1" checked/>
<span class="ml-2">Option 1</span>
</label>
</div>
<div class="mt-1">
<label class="inline-flex items-center">
<input type="radio" class="sr-only" name="radio-sizes" value="2"/>
<span class="form-radio h-6 w-6 text-gray-800" aria-hidden="true"></span>
<input type="radio" class="form-radio h-6 w-6 text-gray-800" name="radio-sizes" value="2"/>
<span class="ml-3 text-lg">Option 2</span>
</label>
</div>
<div class="mt-1">
<label class="inline-flex items-center">
<input type="radio" class="sr-only" name="radio-sizes" value="3"/>
<span class="form-radio h-8 w-8 text-gray-800" aria-hidden="true"></span>
<input type="radio" class="form-radio h-8 w-8 text-gray-800" name="radio-sizes" value="3"/>
<span class="ml-4 text-xl">Option 3</span>
</label>
</div>
Expand Down
40 changes: 20 additions & 20 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,6 @@ const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = function ({ addUtilities, addComponents, theme }) {

// Temporary until this class is added to core
addUtilities({
'.sr-only': {
position: 'absolute',
width: '1px',
height: '1px',
padding: '0',
overflow: 'hidden',
clip: 'rect(0, 0, 0, 0)',
whiteSpace: 'nowrap',
border: '0',
}
})

const options = {
horizontalPadding: defaultTheme.spacing[3],
verticalPadding: defaultTheme.spacing[2],
Expand Down Expand Up @@ -50,21 +36,28 @@ module.exports = function ({ addUtilities, addComponents, theme }) {
borderRadius: options.borderRadius,
backgroundColor: options.backgroundColor,
userSelect: 'none',
'input[type=checkbox]:focus + &, input[type=checkbox]&:focus': {
'&:focus': {
outline: 'none',
boxShadow: options.focusShadow,
},
'input[type=checkbox]:focus:not(:checked) + &, input[type=checkbox]&:focus:not(:checked)': {
'&:focus:not(:checked)': {
borderColor: options.focusBorderColor,
},
'input[type=checkbox]:checked + &, input[type=checkbox]&:checked': {
'&:checked': {
backgroundColor: options.checkedColor,
borderColor: options.checkedColor,
backgroundImage: `url("${svgToDataUri(options.checkboxIcon)}")`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
},
'&::-ms-check': {
color: 'transparent', // Hide the check
background: 'inherit',
borderColor: 'inherit',
borderRadius: 'inherit',
borderWidth: options.borderWidth,
}
},
'.form-radio': {
appearance: 'none',
Expand All @@ -76,21 +69,28 @@ module.exports = function ({ addUtilities, addComponents, theme }) {
borderRadius: '9999px',
backgroundColor: options.backgroundColor,
userSelect: 'none',
'input[type=radio]:focus + &, input[type=radio]&:focus': {
'&:focus': {
outline: 'none',
boxShadow: options.focusShadow,
},
'input[type=radio]:focus:not(:checked) + &, input[type=radio]&:focus:not(:checked)': {
'&:focus:not(:checked)': {
borderColor: options.focusBorderColor,
},
'input[type=radio]:checked + &, input[type=radio]&:checked': {
'&:checked': {
backgroundColor: options.checkedColor,
borderColor: options.checkedColor,
backgroundImage: `url("${svgToDataUri(options.radioIcon)}")`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
},
'&::-ms-check': {
color: 'transparent', // Hide the dot
background: 'inherit',
borderColor: 'inherit',
borderRadius: 'inherit',
borderWidth: options.borderWidth,
}
},
'.form-input, .form-textarea, .form-multiselect': {
appearance: 'none',
Expand Down