Navigation menus used to be a fairly simple thing. Code up an unordered list, float it left and you’re good to go. With responsive design being all the rage these days though you’re faced with some new challenges when creating a menu design
unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.
I’m going to assume you mean input fields of type=”text”, as opposed to textareas. I never think about disabled text inputs as I rarely use them. For those who want clarification, a disabled text input usually has a grayed-out look, and the value is not able to be modified by user input. It’s has the disabled attribute, like so:
<input type="text" value="you cant edit this" disabled="disabled" />And here’s an image of what it would look like, right under a enabled text input for comparison, as rendered in Firefox:
As for styling it…
You can style a disabled text input as much as you could any other text input. It can be targeted with the following selector:
input[disabled='disabled'] { ... styles go here ... }Which means “Take all the <input> tags with the attribute of disabled set to “disabled”, and apply the following styles…
IE6 doesn’t understand that, so if it’s really important to you to show something other than a grayed-out text box to IE6 users, consider adding a class to your input as well, like so:
<input type="text" value="you cant edit this" disabled="disabled" class="disabled" />So now it comes down to which styles would you apply? We don’t have same styles at our disposal that could be applied to regular text boxes, as IE doesn’t pick up on a text-color assignments for disabled text boxes, Safari ignores border designations for all text boxes. Here is an example of giving a background color, new text color, and probably the only thing I could think of that might be useful, a cursor style that doesn’t give an indication that there is editable text.
input[disabled='disabled'] { background:yellow; color:blue; cursor:default; }
Coding Apple’s Navigation Bar Using CSS Sprites, This tutorial is not going to go in depth about all the benefits of sprites, but will show you how to use the technique correctly.
