• Home

Logo

Navigation
  • Home
  • Articles
    • Content Writing
    • Design
    • General
    • Internet Marketing
    • Social Media
    • Tools and Tips
    • Usability
    • Web Hosting Articles
  • Tutorials
    • AJAX Tutorials
    • ASP Tutorials
    • C# Tutorials
    • CGI and Perl Tutorials
    • CSS Tutorials
    • Flash Tutorials
    • HTML Tutorials
    • Illustrator Tutorials
    • Java Tutorials
    • JavaScript Tutorials
    • Linux Tutorials
    • Miscellaneous Tutorials
    • MySQL Tutorials
    • Photoshop Tutorials
    • PHP Tutorials
    • Python Tutorials
    • Wireless Tutorials
    • WordPress Tutorials
    • XML Tutorials
  • Scripts
    • AJAX Scripts
    • ASP Scripts
    • ASP.NET Scripts
    • CGI & Perl Scripts
    • Flash Scripts
    • Java Scripts
    • JavaScript Scripts
    • PHP Scripts
    • Python Scripts
    • Remotely Hosted
    • Tools and Utilities
    • XML Scripts
  • Answers
  • Online Services
  • Tools

Styling Disabled Buttons / Disabled Text Boxes in CSS

By Akash Mehta | on Aug 30, 2008 | 10 Comments
CSS Tutorials HTML Tutorials
  • Tweet
  • Share
  • Tweet
  • Share

As your forms grow in complexity, you’ll probably find a need to temporarily disable an input – either a button, a text box, or some other element. This is quite easy in HTML – the disabled attribute comes to the rescue. But just how do you style those fields, and convey that they are temporarily disabled?

Let’s consider this standard input field:


Pretty standard stuff. Your web browser will automatically style it a little, but mostly just prevent the user from editing without any real visual hints. But let’s add some basic CSS to convey the state of the input, and to standardise it across our site and on most platforms. If we add the following CSS:

input[disabled] {
	border: 1px solid #999;
	background-color: #ddd;
}

But wait – our demo uses inline styles, but your browser might not have just styled that properly if we used a full CSS declaration. We don’t set a value for the disabled attribute – it’s a minimized attribute. To get IE to play nicely with it (and for XHTML), we’ll have to set the value to “disabled”:

watch the wrestler in HD


If possible, just for total compatibility, we can also add a “disabled” class that IE6 will respect and apply styles for correctly.


We can then change the CSS selector we’re using:

input[disabled="disabled"], input.disabled

And we’re done! This works across every major browser – IE6+ and FF1.0+ tested, and Safari 3 / Opera 9.5 should be fine as well. The Sitepoint CSS reference has further information on compatibility, available here.

Finally, if you want to see how Firefox styles disabled fields by default, load up your resource://gre/res/forms.css file (you’ll have to copy and paste it to your address bar). There are a number of lengthy selectors with just a few rules, but here’s the big one, way down the bottom:

button[disabled]:active, button[disabled],
input[type="reset"][disabled]:active,
input[type="reset"][disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
select[disabled] > input[type="button"],
select[disabled] > input[type="button"]:active,
input[type="submit"][disabled]:active,
input[type="submit"][disabled] {
  padding: 0px 6px 0px 6px;
  border: 2px outset ButtonFace;
  color: GrayText;
  cursor: inherit;
}

GrayText is actually a system color – it’s defined by the CSS 2.1 specification and supported on and off in various browsers. These “special” color keywords are supposed to match the local system styles – on a Windows machine, for instance, Firefox would use the color: GrayText rule to style text in disabled fields with the same color that the local Windows system uses. A list of options is available on the CSS reference as well.

Share this story:
  • tweet

Author Description

10 Responses to “Styling Disabled Buttons / Disabled Text Boxes in CSS”

  1. August 30, 2008

    Permana Jayanta Log in to Reply

    I’m beginner in CSS .. and i just know now that we even can style disable input text .. thank for the info ..

  2. September 18, 2008

    Heather Log in to Reply

    This method does not work for radio & checkbox buttons. Do you know of a way we can manipulate styles for those elements (in both IE & FF)?

  3. February 19, 2009

    Bobby Web Guy Log in to Reply

    Great post, css is so powerful, thanks for the advanced tutorial.

  4. March 17, 2009

    Sean Log in to Reply

    Can not work in IE, are u really try this before in IE browser?

  5. April 13, 2009

    Stretch Log in to Reply

    Best info out there on dealing with the differences in browsers. Thanks for sharing!

  6. April 17, 2009

    Yura zaripov Log in to Reply

    For using this in IE you can using jquery. Sample: $(“input[disabled]“).css(“color”,”grey”);

    or javascript.

  7. August 10, 2009

    games Log in to Reply

    In my opinion css is great, thanks for the post.

  8. September 29, 2009

    Pablo Log in to Reply

    It’s very interesting, but it’s not working for me on IE8.

    It works very well on FF 3.5, but IE doesn’t apply the styles for textboxes (background color for example).

    Anyone has a clue why this happens?

    Thanks.

  9. January 11, 2010

    mickael Log in to Reply

    Thank you for this very useful list, I am not sure it is cross browsers, but for my own website, I extended that to: input[type="text"][readonly], and hopefully it worked with Firefox 3.5.7

  10. January 15, 2010

    kjell Log in to Reply

    tnx for the post! Was useful to me

You must be logged in to post a comment.

Connect With Us

RSSSubscribe 0Followers 494Likes
  • Popular
  • Recent
  • Comments
  • Creating Energy Spheres in Photoshop

    Apr 15, 2008 - 96 Comments
  • Easy Screen Scraping in PHP with the Simple HTML DOM Library

    Aug 6, 2008 - 20 Comments
  • Calculating date difference more precisely in PHP

    Mar 7, 2008 - 13 Comments
  • When Does Hosting Your Website in the Cloud Make Sense?

    Oct 8, 2010 - 2 Comments
  • Fun with the Microsoft Managed Extensibility Framework Part 2

    Oct 6, 2010 - 0 Comment
  • Fun with the Microsoft Managed Extensibility Framework Part 1

    Sep 22, 2010 - 0 Comment
  • Website Management on the go with the iPad

    I appreciated your post, but I was looking for something I didn't...
    November 24, 2012 - drmoderator
  • Creating Energy Spheres in Photoshop

    I'm a little stuck down here especially at the step of creating the...
    November 23, 2012 - sarah
  • Running background processes in PHP

    Can you give an example? As see it, you can use this only when you...
    November 16, 2012 - Shaked Klein Orbach
Developer Resources
  • Tutorial Directory
  • Learn HTML
  • Learn PHP
  • Learn CSS
  • Learn AJAX
  • Learn JavaScript
  • Learn Pear
  • White Papers
  • Resources
    • NetVisits Web Directory
    • Realtor Pixels
    • Answers On The Run
    • Ask A Geek
  • Recent Posts

    • When Does Hosting Your Website in the Cloud Make Sense?
    • Fun with the Microsoft Managed Extensibility Framework Part 2
    • Fun with the Microsoft Managed Extensibility Framework Part 1
    • Website Management on the go with the iPad
    • Code Contracts in C# 4.0 – Part 1

    Calendar

    May 2013
    M T W T F S S
    « Oct    
     12345
    6789101112
    13141516171819
    20212223242526
    2728293031  

    Recent Comments

    • drmoderator on Website Management on the go with the iPad
    • sarah on Creating Energy Spheres in Photoshop
    • Shaked Klein Orbach on Running background processes in PHP
    • Thomas Cuvillier on How To Upload Files Using PHP
    • rizal aditya on Extracting text from Word Documents via PHP and COM
    • Home
    © 2003 - 2013 DeveloperTutorials.com. All Rights Reserved. Privacy Policy.