CSS: The Missing Manual by McFarland David Sawyer

Author:McFarland, David Sawyer [McFarland, David Sawyer]
Language: eng
Format: mobi, pdf
Tags: COMPUTERS / Web / Page Design
Published: 0101-01-01T00:00:00+00:00

Figure 10-7. Browsers vary in how

they handle the styling of form

fields. Safari has historically had

the strongest “keep your hands off

my user interface” policy, but with

Safari 3 (right), Apple seems to be

loosening up a bit — only a few

form elements like the fonts in a

drop-down menu can’t be styled in

Safari. Internet Explorer (left) and

Firefox (center) are more tolerant,

but there are significant

differences between them. Internet

Explorer applies background

colors and borders to checkboxes

and radio buttons, while Firefox

doesn’t. The best you can do is

design your forms carefully and not

expect them to look the same on

every browser.

N OTE

For more on the wide variety of

browser results you get when

applying CSS to form elements,

visit

www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited And if you have a day to kill, you

might check

www.webformelements.com

from the obsessive-compulsive

web designer Christopher

Schmitt. On that site, you can

find 3,520 screen shots of a form

elements displayed on Mac,

Windows, and a wide variety of

web browsers. Finally, you can

download a free chapter from the

CSS Cookbook, by Christopher

Schmitt that includes 164, that’s

right, 164 pages of form styling

information and samples:

oreilly.com/catalog/9780596527419/appd.pdf Checkboxes and radio buttons.

Most browsers don’t allow

formatting of these elements.

Opera, however, lets you set a

background color that appears

inside the box or button. Internet

Explorer adds a background

color around the box or button.

Because browsers vary widely

in how they treat these elements,

it’s best to leave them alone.

POWER USERS’ CLINIC:

ATTRIBUTE: THE ULTIMATE

FORM FIELD SELECTOR

When it comes to styling forms, tag

styles just don’t cut the mustard.

After all, text boxes, radio buttons,

checkboxes, password fields, and

buttons all share the same HTML

tag — <input>. While a width of 200

pixels makes sense for a textbox, you

probably don’t want your

checkboxes to be that big, so you

can’t use the <input> tag to format

width. For now, the most cross-

browser-friendly way of formatting

only text fields would be to add a

class name to each text field — like

<input type="text”

class="textfield” name="email” />

— and then create a class style to

format it.

However, you can take advantage of

a more advanced CSS selector —

the attribute selector — to fine-tune

your form styling without resorting

to classes.

An attribute selector targets an

HTML tag based on one of the tag’s

attributes. The type attribute is

responsible for determining what

kind of form element the <input> tag

produces. The type value for a form

text field is text. To create a style

that makes the background color of

all single-line text fields blue, you’d

create this selector and style:

input[type="text"] { background-

color:

blue; }

Changing text in the above example

to submit creates a style for submit

buttons only, and so on.

Since Internet Explorer 7 and 8,

Firefox, Safari, Chrome, and Opera

understand attribute selectors, you

can start using them today if you

want. The downside is that Internet

Explorer 6 users won’t see your

finely styled form elements. If that’s

not a problem — for example, your

boss uses IE 8, or you’re just adding

some eye candy that doesn’t affect

your form’s usability — feel free to

experiment with these very useful

selectors.

Attribute selectors aren’t just for

form elements either. You can use

an attribute selector to style any tag

with a particular attribute. Here’s the

selector for styling links that point to

http://www.cosmofarmer.com/:a[href="http://www.cosmofarmer.com"]

CSS 3 promises even more elaborate

attribute selectors, including the

ability to select attributes that start

with a particular value (like http://)

or which end with a particular value

(like .jpg or .pdf). See Child

Selectors for more details and

examples.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.