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

Commit 6b8682a

Browse files
adamwathanadamwathan
authored
Merge pull request #6 from MartijnCuppens/ie-custom-checkbox-radio
Styling checkboxes directly in IE
2 parents 3781f77 + 1a2179b commit 6b8682a

File tree

2 files changed

+35
-126
lines changed

2 files changed

+35
-126
lines changed

‎docs/pages/index.mdx‎

Lines changed: 15 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -130,49 +130,9 @@ instead.
130130

131131
## Checkbox
132132

133-
Create a custom checkbox by adding a `span` with the `form-checkbox` class next to an
134-
`input[type=checkbox]`.
135-
136-
Hide the real checkbox element using the `sr-only` class, and hide the span from screen readers
137-
using `aria-hidden`.
138-
139133
Control the layout of the checkbox and label however you like — the `form-checkbox` class doesn't
140134
impose any opinions in that regard. Here we've used flexbox to center the checkbox with the label.
141135

142-
<CodeSample code={`
143-
<div class="block">
144-
<span class="text-gray-700">Checkboxes</span>
145-
<div class="mt-2">
146-
<div>
147-
<label class="inline-flex items-center">
148-
<input type="checkbox" class="sr-only" checked/>
149-
<span class="form-checkbox text-gray-800" aria-hidden="true"></span>
150-
<span class="ml-2">Option 1</span>
151-
</label>
152-
</div>
153-
<div>
154-
<label class="inline-flex items-center">
155-
<input type="checkbox" class="sr-only"/>
156-
<span class="form-checkbox text-gray-800" aria-hidden="true"></span>
157-
<span class="ml-2">Option 2</span>
158-
</label>
159-
</div>
160-
<div>
161-
<label class="inline-flex items-center">
162-
<input type="checkbox" class="sr-only"/>
163-
<span class="form-checkbox text-gray-800" aria-hidden="true"></span>
164-
<span class="ml-2">Option 3</span>
165-
</label>
166-
</div>
167-
</div>
168-
</div>
169-
`}/>
170-
171-
### Styling checkboxes directly (No IE 11 support)
172-
173-
If you only need to support Edge and not IE 11, you can also add the `form-checkbox` class to
174-
`input[type=checkbox]` elements directly and avoid the extra presentational `span` element.
175-
176136
<CodeSample code={`
177137
<div class="block">
178138
<span class="text-gray-700">Checkboxes</span>
@@ -210,22 +170,19 @@ color utilities, like `text-indigo-600`.
210170
<div class="mt-2">
211171
<div>
212172
<label class="inline-flex items-center">
213-
<input type="checkbox" class="sr-only" checked/>
214-
<span class="form-checkbox text-indigo-600" aria-hidden="true"></span>
173+
<input type="checkbox" class="form-checkbox text-indigo-600" checked/>
215174
<span class="ml-2">Option 1</span>
216175
</label>
217176
</div>
218177
<div>
219178
<label class="inline-flex items-center">
220-
<input type="checkbox" class="sr-only" checked/>
221-
<span class="form-checkbox text-blue-500" aria-hidden="true"></span>
179+
<input type="checkbox" class="form-checkbox text-blue-500" checked/>
222180
<span class="ml-2">Option 2</span>
223181
</label>
224182
</div>
225183
<div>
226184
<label class="inline-flex items-center">
227-
<input type="checkbox" class="sr-only" checked/>
228-
<span class="form-checkbox text-pink-600" aria-hidden="true"></span>
185+
<input type="checkbox" class="form-checkbox text-pink-600" checked/>
229186
<span class="ml-2">Option 3</span>
230187
</label>
231188
</div>
@@ -244,22 +201,19 @@ use Tailwind's width and height utilities, like `h-6` and `w-6`.
244201
<div class="mt-2">
245202
<div>
246203
<label class="inline-flex items-center">
247-
<input type="checkbox" class="sr-only" checked/>
248-
<span class="form-checkbox h-4 w-4 text-gray-800" aria-hidden="true"></span>
204+
<input type="checkbox" class="form-checkbox h-4 w-4 text-gray-800" checked/>
249205
<span class="ml-2">Option 1</span>
250206
</label>
251207
</div>
252208
<div class="mt-1">
253209
<label class="inline-flex items-center">
254-
<input type="checkbox" class="sr-only"/>
255-
<span class="form-checkbox h-6 w-6 text-gray-800" aria-hidden="true"></span>
210+
<input type="checkbox" class="form-checkbox h-6 w-6 text-gray-800"/>
256211
<span class="ml-3 text-lg">Option 2</span>
257212
</label>
258213
</div>
259214
<div class="mt-1">
260215
<label class="inline-flex items-center">
261-
<input type="checkbox" class="sr-only"/>
262-
<span class="form-checkbox h-8 w-8 text-gray-800" aria-hidden="true"></span>
216+
<input type="checkbox" class="form-checkbox h-8 w-8 text-gray-800"/>
263217
<span class="ml-4 text-xl">Option 3</span>
264218
</label>
265219
</div>
@@ -271,12 +225,6 @@ use Tailwind's width and height utilities, like `h-6` and `w-6`.
271225

272226
## Radio Button
273227

274-
Create a custom radio button by adding a `span` with the `form-radio` class next to an
275-
`input[type=radio]`.
276-
277-
Hide the real radio button using the `sr-only` class, and hide the span from screen readers
278-
using `aria-hidden`.
279-
280228
Control the layout of the radio button and label however you like — the `form-radio` class doesn't
281229
impose any opinions in that regard. Here we've used flexbox to center the radio button with the label.
282230

@@ -286,59 +234,26 @@ impose any opinions in that regard. Here we've used flexbox to center the radio
286234
<div class="mt-2">
287235
<div>
288236
<label class="inline-flex items-center">
289-
<input type="radio" class="sr-only" name="radio" value="1" checked/>
290-
<span class="form-radio text-gray-800" aria-hidden="true"></span>
237+
<input type="radio" class="form-radio text-gray-800" name="radio" value="1" checked/>
291238
<span class="ml-2">Option 1</span>
292239
</label>
293240
</div>
294241
<div>
295242
<label class="inline-flex items-center">
296-
<input type="radio" class="sr-only" name="radio" value="2"/>
297-
<span class="form-radio text-gray-800" aria-hidden="true"></span>
243+
<input type="radio" class="form-radio text-gray-800" name="radio" value="2"/>
298244
<span class="ml-2">Option 2</span>
299245
</label>
300246
</div>
301247
<div>
302248
<label class="inline-flex items-center">
303-
<input type="radio" class="sr-only" name="radio" value="3"/>
304-
<span class="form-radio text-gray-800" aria-hidden="true"></span>
249+
<input type="radio" class="form-radio text-gray-800" name="radio" value="3"/>
305250
<span class="ml-2">Option 3</span>
306251
</label>
307252
</div>
308253
</div>
309254
</div>
310255
`}/>
311256

312-
### Styling radio buttons directly (No IE 11 support)
313-
314-
If you only need to support Edge and not IE 11, you can also add the `form-checkbox` class to
315-
`input[type=checkbox]` elements directly and avoid the extra presentational `span` element.
316-
317-
<CodeSample code={`
318-
<div class="block">
319-
<span class="text-gray-700">Radio Buttons</span>
320-
<div class="mt-2">
321-
<div>
322-
<label class="inline-flex items-center">
323-
<input type="radio" class="form-radio text-gray-800" name="radio-direct" value="1" checked/>
324-
<span class="ml-2">Option 1</span>
325-
</label>
326-
</div>
327-
<div>
328-
<label class="inline-flex items-center">
329-
<input type="radio" class="form-radio text-gray-800" name="radio-direct" value="2"/>
330-
<span class="ml-2">Option 2</span>
331-
</label>
332-
</div>
333-
<div>
334-
<label class="inline-flex items-center">
335-
<input type="radio" class="form-radio text-gray-800" name="radio-direct" value="3"/>
336-
<span class="ml-2">Option 3</span>
337-
</label>
338-
</div>
339-
</div>
340-
</div>
341-
`}/>
342257

343258
### Changing the color
344259

@@ -351,22 +266,19 @@ color utilities, like `text-indigo-600`.
351266
<div class="mt-2">
352267
<div>
353268
<label class="inline-flex items-center">
354-
<input type="radio" class="sr-only" name="radio-colors" value="1" checked/>
355-
<span class="form-radio text-indigo-600" aria-hidden="true"></span>
269+
<input type="radio" class="form-radio text-indigo-600" name="radio-colors" value="1" checked/>
356270
<span class="ml-2">Option 1</span>
357271
</label>
358272
</div>
359273
<div>
360274
<label class="inline-flex items-center">
361-
<input type="radio" class="sr-only" name="radio-colors" value="2"/>
362-
<span class="form-radio text-blue-500" aria-hidden="true"></span>
275+
<input type="radio" class="form-radio text-blue-500" name="radio-colors" value="2"/>
363276
<span class="ml-2">Option 2</span>
364277
</label>
365278
</div>
366279
<div>
367280
<label class="inline-flex items-center">
368-
<input type="radio" class="sr-only" name="radio-colors" value="3"/>
369-
<span class="form-radio text-pink-600" aria-hidden="true"></span>
281+
<input type="radio" class="form-radio text-pink-600" name="radio-colors" value="3"/>
370282
<span class="ml-2">Option 3</span>
371283
</label>
372284
</div>
@@ -385,22 +297,19 @@ use Tailwind's width and height utilities, like `h-6` and `w-6`.
385297
<div class="mt-2">
386298
<div>
387299
<label class="inline-flex items-center">
388-
<input type="radio" class="sr-only" name="radio-sizes" value="1" checked/>
389-
<span class="form-radio h-4 w-4 text-gray-800" aria-hidden="true"></span>
300+
<input type="radio" class="form-radio h-4 w-4 text-gray-800" name="radio-sizes" value="1" checked/>
390301
<span class="ml-2">Option 1</span>
391302
</label>
392303
</div>
393304
<div class="mt-1">
394305
<label class="inline-flex items-center">
395-
<input type="radio" class="sr-only" name="radio-sizes" value="2"/>
396-
<span class="form-radio h-6 w-6 text-gray-800" aria-hidden="true"></span>
306+
<input type="radio" class="form-radio h-6 w-6 text-gray-800" name="radio-sizes" value="2"/>
397307
<span class="ml-3 text-lg">Option 2</span>
398308
</label>
399309
</div>
400310
<div class="mt-1">
401311
<label class="inline-flex items-center">
402-
<input type="radio" class="sr-only" name="radio-sizes" value="3"/>
403-
<span class="form-radio h-8 w-8 text-gray-800" aria-hidden="true"></span>
312+
<input type="radio" class="form-radio h-8 w-8 text-gray-800" name="radio-sizes" value="3"/>
404313
<span class="ml-4 text-xl">Option 3</span>
405314
</label>
406315
</div>

‎index.js‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,6 @@ const defaultTheme = require('tailwindcss/defaultTheme')
33

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

6-
// Temporary until this class is added to core
7-
addUtilities({
8-
'.sr-only': {
9-
position: 'absolute',
10-
width: '1px',
11-
height: '1px',
12-
padding: '0',
13-
overflow: 'hidden',
14-
clip: 'rect(0, 0, 0, 0)',
15-
whiteSpace: 'nowrap',
16-
border: '0',
17-
}
18-
})
19-
206
const options = {
217
horizontalPadding: defaultTheme.spacing[3],
228
verticalPadding: defaultTheme.spacing[2],
@@ -51,21 +37,28 @@ module.exports = function ({ addUtilities, addComponents, theme }) {
5137
borderRadius: options.borderRadius,
5238
backgroundColor: options.backgroundColor,
5339
userSelect: 'none',
54-
'input[type=checkbox]:focus + &, input[type=checkbox]&:focus': {
40+
'&:focus': {
5541
outline: 'none',
5642
boxShadow: options.focusShadow,
5743
},
58-
'input[type=checkbox]:focus:not(:checked) + &, input[type=checkbox]&:focus:not(:checked)': {
44+
'&:focus:not(:checked)': {
5945
borderColor: options.focusBorderColor,
6046
},
61-
'input[type=checkbox]:checked + &, input[type=checkbox]&:checked': {
47+
'&:checked': {
6248
backgroundColor: options.checkedColor,
6349
borderColor: options.checkedColor,
6450
backgroundImage: `url("${svgToDataUri(options.checkboxIcon)}")`,
6551
backgroundSize: 'cover',
6652
backgroundPosition: 'center',
6753
backgroundRepeat: 'no-repeat',
6854
},
55+
'&::-ms-check': {
56+
color: 'transparent', // Hide the check
57+
background: 'inherit',
58+
borderColor: 'inherit',
59+
borderRadius: 'inherit',
60+
borderWidth: options.borderWidth,
61+
}
6962
},
7063
'.form-radio': {
7164
appearance: 'none',
@@ -78,21 +71,28 @@ module.exports = function ({ addUtilities, addComponents, theme }) {
7871
borderRadius: '50%',
7972
backgroundColor: options.backgroundColor,
8073
userSelect: 'none',
81-
'input[type=radio]:focus + &, input[type=radio]&:focus': {
74+
'&:focus': {
8275
outline: 'none',
8376
boxShadow: options.focusShadow,
8477
},
85-
'input[type=radio]:focus:not(:checked) + &, input[type=radio]&:focus:not(:checked)': {
78+
'&:focus:not(:checked)': {
8679
borderColor: options.focusBorderColor,
8780
},
88-
'input[type=radio]:checked + &, input[type=radio]&:checked': {
81+
'&:checked': {
8982
backgroundColor: options.checkedColor,
9083
borderColor: options.checkedColor,
9184
backgroundImage: `url("${svgToDataUri(options.radioIcon)}")`,
9285
backgroundSize: 'cover',
9386
backgroundPosition: 'center',
9487
backgroundRepeat: 'no-repeat',
9588
},
89+
'&::-ms-check': {
90+
color: 'transparent', // Hide the dot
91+
background: 'inherit',
92+
borderColor: 'inherit',
93+
borderRadius: 'inherit',
94+
borderWidth: options.borderWidth,
95+
}
9696
},
9797
'.form-input, .form-textarea, .form-multiselect': {
9898
appearance: 'none',

0 commit comments

Comments
 (0)