CSS form styling

Outline property

This property works like the border property although it does not ‘move’ the element, it simply draws the outline around it. Example elements with outlines.

.outline
{
   outline:#003399 solid 2px;
}

The outline property has three arguments, the colour, style and size. The border property can be any of: solid, inset, outset, ridge, double, groove, dashed, dotted, hidden and none. The size can be specified as: thin, medium and thick or in the sizes: px (pixels), em (units of the current font size), ex (the height of the letter x in the current font), in (inches), cm (centimetres), mm (millimetres), pt (points), pc (picas).

Borders and backgrounds

Other useful properties include the border and background, these can be easily applied to form elements to give them a look that matches the web site. Example elements with backgrounds/borders.

background: #FFFAC9 url(images/img.png) repeat-y fixed top left;

border: 1px solid #006633;

The background property has five parts. Firstly is the colour for the background (if the background image does not cover the whole element this colour will be displayed), the background image is next specified by an url to the image, the style of repeat for the image (repeat, repeat-x, repeat-y, no-repeat), the attachment for the image (fixed, scroll) and finally the position of the image (top, bottom, center -> left, right, center or specified as a percentage e.g. 50% 50%). The border property has three elements ,the size of the border, the style of the border and the colour of the border.

Button styling

Buttons in HTML can have the same styles applied to them as the other elements (outlines, borders etc). There is one special type of submit button that allows you to specify an image for the button rather than display the default one. Example buttons.

<input type="image" name="button1" id="button1" src="images/submit.png" />

Note that the type is set to image and the src attribute points to the image location.

Categories

Tags

No tags

Social