/
index.html
595 lines (423 loc) · 33.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Styling Disabled Form Fields - TJ VanToll - Tutorials, Thoughts, and Ramblings on Front End Development</title>
<meta name="author" content="TJ VanToll">
<meta name="description" content="Form fields can be disabled by simply adding the disabled attribute. Simple Disabled Fields1
2
3
<input type="text" disabled />
< …">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://tjvantoll.com/2012/03/17/Styling-Disabled-Form-Fields">
<!-- Use custom favicon -->
<!--<link href="/favicon.png" rel="icon">-->
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<!--Custom script concatenation
<script src="/javascripts/modernizr-2.5.3.js"></script>
<script src="/javascripts/ender.js"></script>
<script src="/javascripts/octopress.js"></script>
<script src="/javascripts/PictureCube.js"></script>
<script src="/javascripts/ender.tipsy.js"></script>
<script src="/javascripts/blog.js"></script>
-->
<script src="/javascripts/build/scripts.js"></script>
<link href="/atom.xml" rel="alternate" title="TJ VanToll" type="application/atom+xml">
<style>
/* Fonts from Google"s Web font directory at http://google.com/webfonts */
@import url(http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic);
@import url(http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic);
</style>
<script type="text/javascript">
if (window.location.host.indexOf('local') == -1) {
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-29179796-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
}
</script>
</head>
<body >
<header role="banner"><hgroup>
<div id="picture-cube"></div>
<h1><a href="/">TJ VanToll</a></h1>
<h2>Tutorials, Thoughts, and Ramblings on Front End Development</h2>
</hgroup>
</header>
<nav role="navigation"><ul class="subscription" data-subscription="rss">
<li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
</ul>
<form action="http://google.com/search" method="get">
<fieldset role="search">
<input type="hidden" name="q" value="site:tjvantoll.com" />
<input class="search" type="text" name="q" results="0" placeholder="Search"/>
</fieldset>
</form>
<ul class="main-navigation">
<li><a href="/blog">Blog</a></li>
<li><a href="/">About</a></li>
<li><a href="/blog/archives">Archives</a></li>
<li><a href="/speaking">Speaking</a></li>
</ul>
</nav>
<div id="main">
<div id="content">
<div>
<article class="hentry" role="article">
<header>
<h1 class="entry-title">Styling Disabled Form Fields</h1>
<p class="meta">
<time datetime="2012-03-17T00:00:00-04:00" pubdate data-updated="true">Mar 17<span>th</span>, 2012</time>
| <a href="#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p>Form fields can be disabled by simply adding the <code>disabled</code> attribute.</p>
<figure class='code'><figcaption class='not_empty'><span>Simple Disabled Fields</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">disabled</span> <span class="nt">/></span>
</span><span class='line'><span class="nt"><textarea</span> <span class="na">disabled</span><span class="nt">></textarea></span>
</span><span class='line'><span class="nt"><select</span> <span class="na">disabled</span><span class="nt">></select></span>
</span></code></pre></td></tr></table></div></figure>
<p>Disabled fields cannot be interacted with by the user; the browser will not allow the field to receive focus or be tabbed to. For an intuitive UI it’s important that disabled fields are clearly evident to the user. Users are easily confused and frustrated when attempting to interact with fields that they are not able to.</p>
<p>To apply custom styling to disabled fields you can add CSS rules that target <code>input:disabled</code>, <code>select:disabled</code>, & <code>textarea:disabled</code>. (Note: IE doesn’t support the <a href="https://developer.mozilla.org/En/CSS/%3Adisabled">disabled pseduo class</a> until IE9, so you’ll need to use <code>input[disabled]</code>, <code>select[disabled]</code>, & <code>textarea[disabled]</code> <a href="https://developer.mozilla.org/en/CSS/Attribute_selectors">attribute selectors</a> if IE < 9 support is important for you. It’ll work just the same.)</p>
<p>While you <i>can</i> provide custom disabled field styling, it’s not generally a good idea. All browsers come with default styling for these fields that attempt to mesh with native UI elements in the OS. Also, users have a certain expectation for what disabled fields look like in their preferred web browser and it’s best not to mess with that.</p>
<p>Unfortunately some browser’s default styling is less than ideal. <!--more-->To best show this I’ve created a <a href="http://jsfiddle.net/ygwnh/12/">test case</a> with the most common form elements and recorded a rendering of the test case in a large number of browser / OS combinations. Since some of the styles are more evident when a the element is selected and/or has a value, I included both a grouping with no <code>selected</code> or <code>value</code> attributes, and another with those set.</p>
<h3>Markup</h3>
<p>Here’s the markup I used for the test cases, some very basic form fields with the <code>disabled</code> attribute.</p>
<h4>No Value / Selected Attributes</h4>
<figure class='code'><figcaption class='not_empty'><span>Markup Used to Generate the Examples </span><a href='http://jsfiddle.net/ygwnh/12/'>link</a></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt"><table></span>
</span><span class='line'> <span class="nt"><thead></span>
</span><span class='line'> <span class="nt"><tr></span>
</span><span class='line'> <span class="nt"><th></span>Enabled<span class="nt"></th></span>
</span><span class='line'> <span class="nt"><th></span>Disabled<span class="nt"></th></span>
</span><span class='line'> <span class="nt"></tr></span>
</span><span class='line'> <span class="nt"></thead></span>
</span><span class='line'> <span class="nt"><tbody></span>
</span><span class='line'> <span class="nt"><tr></span>
</span><span class='line'> <span class="nt"><td><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="nt">/></td></span>
</span><span class='line'> <span class="nt"><td><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">disabled</span> <span class="nt">/></td></span>
</span><span class='line'> <span class="nt"></tr></span>
</span><span class='line'> <span class="nt"><tr></span>
</span><span class='line'> <span class="nt"><td><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="nt">/></td></span>
</span><span class='line'> <span class="nt"><td><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">disabled</span> <span class="nt">/></td></span>
</span><span class='line'> <span class="nt"></tr></span>
</span><span class='line'> <span class="nt"><tr></span>
</span><span class='line'> <span class="nt"><td><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="nt">/></td></span>
</span><span class='line'> <span class="nt"><td><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">disabled</span> <span class="nt">/></td></span>
</span><span class='line'> <span class="nt"></tr></span>
</span><span class='line'> <span class="nt"><tr></span>
</span><span class='line'> <span class="nt"><td><select></select></td></span>
</span><span class='line'> <span class="nt"><td><select</span> <span class="na">disabled</span><span class="nt">></select></td></span>
</span><span class='line'> <span class="nt"></tr></span>
</span><span class='line'> <span class="nt"><tr></span>
</span><span class='line'> <span class="nt"><td><textarea></textarea></td></span>
</span><span class='line'> <span class="nt"><td><textarea</span> <span class="na">disabled</span><span class="nt">></textarea></td></span>
</span><span class='line'> <span class="nt"></tr></span>
</span><span class='line'> <span class="nt"></tbody></span>
</span><span class='line'><span class="nt"></table></span>
</span></code></pre></td></tr></table></div></figure>
<h4>With Value / Selected Attributes</h4>
<figure class='code'><figcaption class='not_empty'><span>Markup Used to Generate the Examples </span><a href='http://jsfiddle.net/ygwnh/12/'>link</a></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt"><table></span>
</span><span class='line'> <span class="nt"><thead></span>
</span><span class='line'> <span class="nt"><tr></span>
</span><span class='line'> <span class="nt"><th></span>Enabled w/Value<span class="nt"></th></span>
</span><span class='line'> <span class="nt"><th></span>Disabled w/Value<span class="nt"></th></span>
</span><span class='line'> <span class="nt"></tr></span>
</span><span class='line'> <span class="nt"></thead></span>
</span><span class='line'> <span class="nt"><tbody></span>
</span><span class='line'> <span class="nt"><tr></span>
</span><span class='line'> <span class="nt"><td><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">"Value"</span> <span class="nt">/></td></span>
</span><span class='line'> <span class="nt"><td><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">disabled</span> <span class="na">value=</span><span class="s">"Value"</span><span class="nt">></td></span>
</span><span class='line'> <span class="nt"><tr></span>
</span><span class='line'> <span class="nt"><td><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">checked</span> <span class="nt">/></td></span>
</span><span class='line'> <span class="nt"><td><input</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">disabled</span> <span class="na">checked</span> <span class="nt">/></td></span>
</span><span class='line'> <span class="nt"></tr></span>
</span><span class='line'> <span class="nt"><tr></span>
</span><span class='line'> <span class="nt"><td><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">checked</span> <span class="nt">/></td></span>
</span><span class='line'> <span class="nt"><td><input</span> <span class="na">type=</span><span class="s">"radio"</span> <span class="na">disabled</span> <span class="na">checked</span> <span class="nt">/></td></span>
</span><span class='line'> <span class="nt"></tr></span>
</span><span class='line'> <span class="nt"><tr></span>
</span><span class='line'> <span class="nt"><td><select><option</span> <span class="na">selected</span><span class="nt">></span>Value<span class="nt"></option></select></td></span>
</span><span class='line'> <span class="nt"><td><select</span> <span class="na">disabled</span><span class="nt">><option</span> <span class="na">selected</span><span class="nt">></span>Value<span class="nt"></option></select></td></span>
</span><span class='line'> <span class="nt"></tr></span>
</span><span class='line'> <span class="nt"><tr></span>
</span><span class='line'> <span class="nt"><td><textarea></span>Value<span class="nt"></textarea></td></span>
</span><span class='line'> <span class="nt"><td><textarea</span> <span class="na">disabled</span><span class="nt">></span>Value<span class="nt"></textarea></td></span>
</span><span class='line'> <span class="nt"></tr></span>
</span><span class='line'> <span class="nt"></tbody></span>
</span><span class='line'><span class="nt"></table></span>
</span></code></pre></td></tr></table></div></figure>
<h3>Results</h3>
<p>You can view <a href="/images/posts/2012-03-17/All.html">all the results on one page</a> or see individual ones listed below.</p>
<h4>Windows</h4>
<ul>
<li><a href="/images/posts/2012-03-17/IE6.png" title="IE6">IE6</a></li>
<li><a href="/images/posts/2012-03-17/IE7.png" title="IE7">IE7</a></li>
<li><a href="/images/posts/2012-03-17/IE8.png" title="IE8">IE8</a></li>
<li><a href="/images/posts/2012-03-17/IE9.png" title="IE9">IE9</a></li>
<li><a href="/images/posts/2012-03-17/IE10.png" title="IE10">IE10</a></li>
<li><a href="/images/posts/2012-03-17/Windows-Chrome-17.png" title="Windows - Chrome 17">Chrome 17</a></li>
<li><a href="/images/posts/2012-03-17/Windows-Safari-5.1.png" title="Windows - Safari 5.1">Safari 5.1</a></li>
<li><a href="/images/posts/2012-03-17/Windows-Firefox-10.png" title="Windows - Firefox 10">Firefox 10</a></li>
<li><a href="/images/posts/2012-03-17/Windows-Opera-11.61.png" title="Windows - Opera 11.61">Opera 11.61</a></li>
</ul>
<h4>OS X</h4>
<ul>
<li><a href="/images/posts/2012-03-17/OSX-Chrome-17.png" title="OSX - Chrome 17">Chrome 17</a></li>
<li><a href="/images/posts/2012-03-17/OSX-Safari-5.1.png" title="OSX - Safari 5.1">Safari 5.1</a></li>
<li><a href="/images/posts/2012-03-17/OSX-Firefox-11.png" title="OSX - Firefox 11">Firefox 11</a></li>
<li><a href="/images/posts/2012-03-17/OSX-Opera-11.61.png" title="OSX - Opera 11.61">Opera 11.61</a></li>
</ul>
<h4>Mobile</h4>
<ul>
<li><a href="/images/posts/2012-03-17/iOS-5.png" title="iOS 5">iOS 5</a></li>
<li><a href="/images/posts/2012-03-17/Android-2.3.png" title="Android 2.3">Android 2.3</a></li>
<li><a href="/images/posts/2012-03-17/Opera-Mobile.png" title="Opera Mobile">Opera Mobile</a></li>
</ul>
<h3>Findings</h3>
<p>In general browsers add some combination of <code>opacity</code>, a grayish <code>background-color</code>, and a grayish <code>color</code> to the element to create the disabled effect. For the most part browsers do a pretty good job making it evident that the fields are disabled.</p>
<p>There are exceptions though. One glaring issue is the display of disabled text inputs and textareas in IE < 10; when no text is present it’s impossible to tell whether the field is disabled. In Windows, all non-IE browsers simply apply a <code>background-color</code> of <code>#EBEBE4</code> to all disabled elements. Unfortunately, IE < 10 doesn’t do much of anything to designate text inputs and textareas as disabled other than change the color of the text, which, doesn’t work out all that well when there’s no text present.</p>
<h3>Normalizing IE</h3>
<p>To normalize the display of disabled fields in IE we need to be able to target IE <= 9 with CSS. Why? We don’t want to override the default styling whenever possible. As mentioned earlier browsers apply different styling to attempt to match native UI elements. If you blindly apply a background-color to all disabled elements, you’ll do so in Windows, OS X, Linux, iOS, Android, etc… as well as any future devices where it might look horrible, or worse, confuse the user.</p>
<p>So back to selecting IE <= 9. In my opinion the most elegant way to do this is use <a href="http://msdn.microsoft.com/en-us/library/ms537512.aspx">IE’s conditional comments</a> to apply classes to the HTML node. This approach was <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">first proposed by Paul Irish in 2008</a> and is used in the <a href="http://html5boilerplate.com/">HTML5 boilerplate</a>. There are many variations but in this case we only need to worry about IE <= 9.</p>
<figure class='code'><figcaption class='not_empty'><span>Applying a Class to IE <= 9</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="c"><!--[if lte IE 9 ]> <html class="lte9"> <![endif]--></span>
</span><span class='line'><span class="c"><!--[if (gt IE 9)|!(IE)]><!--></span> <span class="nt"><html</span> <span class="na">class=</span><span class="s">""</span><span class="nt">></span> <span class="c"><!--<![endif]--></span>
</span></code></pre></td></tr></table></div></figure>
<p>Then we can apply the <code>background-color</code> as such:</p>
<figure class='code'><figcaption class='not_empty'><span>Normalizing the Disabled Field Display for Windows</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="nc">.lte9</span> <span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s1">'text'</span><span class="o">][</span><span class="nt">disabled</span><span class="o">],</span> <span class="nc">.lte9</span> <span class="nt">textarea</span><span class="o">[</span><span class="nt">disabled</span><span class="o">]</span> <span class="p">{</span>
</span><span class='line'> <span class="k">background-color</span><span class="o">:</span> <span class="m">#EBEBE4</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>
<p>Alternatively you could use IE’s conditional comments to apply these rules directly:</p>
<figure class='code'><figcaption class='not_empty'><span>Using IE’s Conditional Comments</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="c"><!--[if lte IE 9 ]></span>
</span><span class='line'><span class="c"> <style></span>
</span><span class='line'><span class="c"> input[type='text'][disabled], textarea[disabled] {</span>
</span><span class='line'><span class="c"> background-color: #EBEBE4;</span>
</span><span class='line'><span class="c"> }</span>
</span><span class='line'><span class="c"> </style></span>
</span><span class='line'><span class="c"><!--<![endif]--></span>
</span></code></pre></td></tr></table></div></figure>
<p>Either of these approaches will normalize the display of disabled text inputs and textareas on Windows.</p>
<p><img src="/images/posts/2012-03-17/IE-Before-and-After.png" alt="IE Before and After" /> <!-- http://jsfiddle.net/vCdcr/show/ --></p>
<h3>Normalizing IE6</h3>
<p>The above solution will not affect the display of these elements in IE6 because it does not support CSS attribute selectors. Therefore, if you’re still supporting IE6 and the display of disabled fields is important to your UI you’ll need some other sort of hook on the node. For example a class will work:</p>
<figure class='code'><figcaption class='not_empty'><span>IE6 Disabled Field Markup</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="c"><!--[if IE 6 ]> <html class="ie6"> <![endif]--></span>
</span><span class='line'><span class="c"><!--[if (gt IE 6)|!(IE)]><!--></span> <span class="nt"><html</span> <span class="na">class=</span><span class="s">""</span><span class="nt">></span> <span class="c"><!--<![endif]--></span>
</span><span class='line'>
</span><span class='line'>/* … */
</span><span class='line'>
</span><span class='line'><span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">disabled</span> <span class="na">class=</span><span class="s">"disabled"</span> <span class="nt">/></span>
</span><span class='line'><span class="nt"><textarea</span> <span class="na">disabled</span> <span class="na">class=</span><span class="s">"disabled"</span><span class="nt">></span>
</span></code></pre></td></tr></table></div></figure>
<p>Then you can apply the following CSS:</p>
<figure class='code'><figcaption class='not_empty'><span>IE6 Disabled Field Styling</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="nc">.ie6</span> <span class="nt">input</span><span class="nc">.disabled</span><span class="o">,</span> <span class="nc">.ie6</span> <span class="nt">textarea</span><span class="nc">.disabled</span> <span class="p">{</span>
</span><span class='line'> <span class="k">background-color</span><span class="o">:</span> <span class="m">#EBEBE4</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>
<h3>Other Issues</h3>
<p>A number of browsers including all OS X browsers except Opera, Android, and iOS do a poor job making textareas appear disabled, in some cases even when text is present. If your UI contains disabled textareas it’s probably worth adding a little bit of opacity to compensate for browsers that don’t make it very apparent that you cannot interact with them.</p>
<figure class='code'><figcaption class='not_empty'><span>Normalizing Textarea Disabling</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="nt">textarea</span><span class="nd">:disabled</span> <span class="p">{</span>
</span><span class='line'> <span class="k">opacity</span><span class="o">:</span> <span class="m">0</span><span class="o">.</span><span class="m">5</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>
<p>The effect is subtle but can make a big difference in helping the user to recognize that the field is disabled, especially if multiple textareas are near each other. Here’s an example from Chrome 17 on OS X:</p>
<p><img src="/images/posts/2012-03-17/OSX-Before-and-After.png" alt="OSX Before and After" /> <!-- http://jsfiddle.net/JpNav/1/show/ --></p>
<h3>Summary</h3>
<p>Browsers have default styling for disabled fields that is usually pretty good at visually indicating that the field cannot be interacted with. In situations where the browser default isn’t ideal, custom styling can be applied.</p>
</div>
<footer>
<p class="meta">
<span class="byline author vcard">Posted by <span class="fn">TJ VanToll</span></span>
<time datetime="2012-03-17T00:00:00-04:00" pubdate data-updated="true">Mar 17<span>th</span>, 2012</time>
<span class="categories">
<a class='category' href='/blog/categories/browsers/'>Browsers</a>, <a class='category' href='/blog/categories/css/'>CSS</a>
</span>
</p>
<p class="author_card meta">
<img src="/images/me/1.jpg" alt="Me!" id="post_me" />
TJ VanToll is an avid web developer working for <a href="http://liquidweb.com">Liquid Web</a> and living in Lansing, MI. He is an open source advocate that is on the <a href="http://jqueryui.com">jQuery UI</a> team and publishes this blog <a href="https://github.com/tjvantoll/tjvantoll.github.com/tree/source">open source</a>. When not on the internet he is generally found <a href="/images/kids/2.jpg">brainwashing his children</a> and talking about himself in the third person. If you like hearing TJ talk about himself you should consider <a href="http://twitter.com/tjvantoll">following him on Twitter</a>.
</p>
<div class="sharing">
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://tjvantoll.com/2012/03/17/Styling-Disabled-Form-Fields/" data-via="tjvantoll" data-counturl="http://tjvantoll.com/2012/03/17/Styling-Disabled-Form-Fields/" >Tweet</a>
</div>
<p class="meta">
<a class="basic-alignment left" href="/2012/03/08/IE7-Attribute-Selector-Bugs/" title="Previous Post: IE7 Attribute Selector Bugs">« IE7 Attribute Selector Bugs</a>
<a class="basic-alignment right" href="/2012/03/21/javascript-for-the-java-developer/" title="Next Post: JavaScript for the Java Developer">JavaScript for the Java Developer »</a>
</p>
</footer>
</article>
<section>
<h1>Comments</h1>
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
</div>
<aside class="sidebar">
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
<a href="/2013/01/11/detecting-internet-explorer-without-jquery/">Detecting Internet Explorer without jQuery</a>
</li>
<li class="post">
<a href="/2013/01/09/html5-hidden-attribute-browser-support/">HTML 5 hidden Attribute Browser Support</a>
</li>
<li class="post">
<a href="/2013/01/05/is-it-safe-to-use-the-body-as-a-top-level-container-yet/">Using the body Element as a Top Level Container - Is it Safe Yet?</a>
</li>
<li class="post">
<a href="/2013/01/01/enter-should-submit-forms-stop-messing-with-that/">The Enter Key should Submit Forms, Stop Suppressing it</a>
</li>
<li class="post">
<a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
</li>
<li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable <tbody>s - A CSS Only Approach</a>
</li>
<li class="post">
<a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
</li>
<li class="post">
<a href="/2012/10/24/adding-pointers-to-jquery-ui-tooltips/">Adding Pointers to jQuery UI Tooltips</a>
</li>
<li class="post">
<a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
</li>
<li class="post">
<a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
</li>
</ul>
</section>
<section >
<h1>Twitter</h1>
<a class="twitter-timeline" href="https://twitter.com/tjvantoll" data-widget-id="284127791589494784">Tweets by @tjvantoll</a>
</section>
<section class="jsdocs">
<h1><a href="http://promotejs.com">Promote JS!</a></h1>
<a href="https://developer.mozilla.org/en/JavaScript/Guide" title="JS Tutorial, JavaScript Tutorial, JavaScript Guide, Learn JavaScript JS, How To Learn JS, Learning JavaScript"><img src="http://static.jsconf.us/promotejshs.png" height="150" alt="JS Tutorial, JavaScript Tutorial, JavaScript Guide, Learn JavaScript JS, How To Learn JS, Learning JavaScript" width="180"></a></section>
</aside>
</div>
</div>
<footer role="contentinfo"><p>
Copyright © 2013 - <a href="/">TJ VanToll</a> -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script type="text/javascript">
var disqus_shortname = 'tjvantoll';
// var disqus_developer = 1;
var disqus_identifier = 'http://tjvantoll.com/2012/03/17/Styling-Disabled-Form-Fields/';
var disqus_url = 'http://tjvantoll.com/2012/03/17/Styling-Disabled-Form-Fields/';
var disqus_script = 'embed.js';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script type="text/javascript">
(function(){
var twitterWidgets = document.createElement('script');
twitterWidgets.type = 'text/javascript';
twitterWidgets.async = true;
twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
})();
</script>
</body>
</html>