W3hobbyist

The other day on the DigitalPoint webmaster forums, I had somebody ask this question “How to half-disable a form field”.

From all the HTML I knew, it was not possible in a straight-forward way! But we can manipulate with CSS.

The HTML-CSS

<span style="border: 2px inset;">
   <input style="border: none; text-align: right;" name="half_1" size="3" type="text" value="ABC" />
   <input style="background: #FFFFFF; border: none;" name="half_2" readonly="readonly" size="3" type="text" value="123" />
</span>

Bookmark It

Hide Sites

CSS is a one of the most useful inventions made for the web. However, to style every element, you need to ‘hook’ the style statement to the elements by using selectors. Class and ID of an element(s) are most commonly used for hooking. But there are some lesser known hooks which can function without ‘class’ or ‘id’ hooks. These hooks style elements using other attributes and their values. Eg: A specific hyperlink can be styled using its ‘href’ attribute and its value.

A complete list of CSS selectors is available at w3.org. Another excellent source is Brian Wilson’s page on CSS attribute selectors

Eg: If you need to style internal links differently than external links, then here is how you should do it:

1
2
3
4
5
6

a[href*="yourdomain.com"]
{
font-family: Verdana;
font-size: 12px;
color: #0078B3;
}

Observe precautions because not all selectors belong to the same same CSS version. Some are CSS 2 properties whereas some are available only CSS 3 onwards. A compiled list of CSS versions and their browser compatibility can be found at QuircksMode.org and WebDevOut.

Bookmark It

Hide Sites

CSS is the Saviour most times but it may act like a small devil in some cases. By far, the most common issue with CSS is that all browsers are not equally compliant with CSS. Microsoft’s Internet Explorer being the worst candidate for CSS compatibility.

Another issue arises from screen resolutions. Though 1024×768 resolutions is what most visitors have today, some still use 800×600 screen resolutions. If you designed your web page for 1024 px width, it could look ugly at 800px wide resolution. If you use the right or bottom positioning properties in CSS, be very cautious. To avoid any issue due to right or bottom properties, it is always safe to use the left and top properties.

If you need to find out whether or not your web page will render properly at different resolutions, simple change the size of the browser window and it will give you an idea of how the elements are positioned at different resolutions.

Bookmark It

Hide Sites