7 min read

(For more resources related to this topic, see here.)

CSS3 for web forms

CSS3 brings us infinite new possibilities and allows styling to make better web forms. CSS3 gives us a number of new ways to create an impact with our form designs, with quite a few important changes. HTML5 introduced useful new form elements such as sliders and spinners and old elements such as textbox and textarea, and we can make them look really cool with our innovation and CSS3. Using CSS3, we can turn an old and boring form into a modern, cool, and eye catching one.

CSS3 is completely backwards compatible, so we will not have to change the existing form designs. Browsers have and will always support CSS2.

CSS3 forms can be split up into modules. Some of the most important CSS3 modules are:

  • Selectors (with pseudo-selectors)
  • Backgrounds and Borders
  • Text (with Text Effects)
  • Fonts
  • Gradients

Styling of forms always varies with requirements and the innovation of the web designer or developer. In this article, we will look at those CSS3 properties with which we can style our forms and give them a rich and elegant look.

Some of the new properties of CSS3 required vendor prefixes, which were used frequently as they helped browsers to read the code. In general, it is no longer needed to use them with CSS3 for some of the properties, such as border-radius, but they come into action when the browser doesn’t interpret the code. A list of all the vendor prefixes for major browsers is given as follows:

  • -moz-: Firefox
  • -webkit-: WebKit browsers such as Safari and Chrome
  • -o-: Opera
  • -ms-: Internet Explorer

Before we start styling the form, let us have a quick revision of form modules for better understanding and styling of the forms.

Selectors and pseudo-selectors

Selectors are a pattern used to select the elements which we want to style. A selector can contain one or more simple selectors separated by combinators. The CSS3 Selectors module introduces three new attribute selectors; they are grouped together under the heading Substring Matching Attribute Selectors.

These new selectors are as follows:

  • [att^=val]: The “begins with” selector
  • [att$=val]: The “ends with” selector
  • [att*=val]: The “contains” selector

The first of these new selectors, which we will refer to as the “begins with” selector, allows the selection of elements where a specified attribute (for example, the href attribute of a hyperlink) begins with a specified string (for example, http://, https://, or mailto:).

In the same way, the additional two new selectors, which we will refer to as the “ends with” and “contains” selectors, allow the selection of elements where a specified attribute either ends with or contains a specified string respectively.

A CSS pseudo-class is just an additional keyword to selectors that tells a special state of the element to be selected. For example, :hover will apply a style when the user hovers over the element specified by the selector. Pseudo-classes, along with pseudo-elements, apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator, such as :visited, and the status of its content, such as :checked, on some form elements.

The new pseudo-classes are as follows:

Type

Details

:last-child

It is used to match an element that is the last child element of its parent element.

:first-child

It is used to match an element that is the first child element of its parent element.

:checked

It is used to match elements such as radio buttons or checkboxes which are checked.

:first-of-type

It is used to match the first child element of the specified element type.

:last-of-type

It is used to match the last child element of the specified element type.

:nth-last-of-type(N)

It is used to match the Nth child element from the last of the specified element type.

:only-child

It is used to match an element if it’s the only child element of its parent.

:only-of-type

It is used to match an element that is the only child element of its type.

:root

It is used to match the element that is the root element of the document.

:empty

It is used to match elements that have no children.

:target

It is used to match the current active element that is the target of an identifier in the document’s URL.

:enabled

It is used to match user interface elements that are enabled.

:nth-child(N)

It is used to match every Nth child element of the parent.

:nth-of-type(N)

It is used to match every Nth child  element of the parent counting from the last of the parent.

:disabled

It is used to match user interface elements that are disabled.

:not(S)

It is used to match elements that aren’t matched by the specified selector.

:nth-last-child(N)

Within a parent element’s list of child elements, it is used to match elements on the basis of their positions.

Backgrounds

CSS3 contains several new background attributes; and moreover, in CSS3, some changes are also made in the previous properties of the background; which allow greater control on the background element.

The new background properties added are as follows.

The background-clip property

The background-clip property is used to determine the allowable area for the background image.

If there is no background image, then this property has only visual effects such as when the border has transparent regions or partially opaque regions; otherwise, the border covers up the difference.

Syntax

The syntax for the background-clip property are as follows:

background-clip: no-clip / border-box / padding-box / content-box;

Values

The values for the background-clip property is as follows:

  • border-box: With this, the background extends to the outside edge of the border
  • padding-box: With this, no background is drawn below the border
  • content-box: With this, the background is painted within the content box; only the area the content covers is painted
  • no-clip: This is the default value, same as border-box

The background-origin property

The background-origin property specifies the positioning of the background image or color with respect to the background-position property.

This property has no effect if the background-attachment property for the background image is fixed.

Syntax

The following is the syntax for the background-attachment property:

background-origin: border-box / padding-box / content-box;

Values

The values for the background-attachment property are as follows:

  • border-box: With this, the background extends to the outside edge of the border
  • padding-box: By using this, no background is drawn below the border
  • content-box: With this, the background is painted within the content box

The background-size property

The background-size property specifies the size of the background image.

If this property is not specified then the original size of the image will be displayed.

Syntax

The following is the syntax for the background-size property:

background-size: length / percentage / cover / contain;

Values

The values for the background-size property are as follows:

  • length: This specifies the height and width of the background image. No negative values are allowed.
  • percentage: This specifies the height and width of the background image in terms of the percent of the parent element.
  • cover: This specifies the background image to be as large as possible so that the background area is completely covered.
  • contain: This specifies the image to the largest size such that its width and height can fit inside the content area.

Apart from adding new properties, CSS3 has also enhanced some old background properties, which are as follows.

The background-color property

If the underlying layer of the background image of the element cannot be used, we can specify a fallback color in addition to specifying a background color.

We can implement this by adding a forward slash before the fallback color.

background-color: red / blue;

The background-repeat property

In CSS2 when an image is repeated at the end, the image often gets cut off. CSS3 introduced new properties with which we can fix this problem:

  • space: By using this property between the image tiles, an equal amount of space is applied until they fill the element
  • round: By using this property until the tiles fit the element, the image is scaled down

The background-attachment property

With the new possible value of local, we can now set the background to scroll when the element’s content is scrolled.

This comes into action with elements that can scroll. For example:

body{background-image:url('example.gif');background-repeat:no-repeat;
background-attachment:fixed;}

CSS3 allows web designers and developers to have multiple background images, using nothing but just a simple comma-separated list. For example:

background-image: url(abc.png), url(xyz.png);

Summary

In this article, we learned about the basics of CSS3 and the modules in which we can categorize the CSS3 for forms, such as backgrounds. Using this we can improvise the look and feel of a form. This makes a form more effective and attractive.

Resources for Article:

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here