CSS

Pseudo-classes for Form Element

CSS3 introduced some new pseudo-classes for form elements. In this video tutorial we’ll be looking at these 3 pseudo-classes:
:required
:valid
:invalid

HTML file
index.html

< !DOCTYPE HTML>
<html>
<head>
<title>CSS pseudo-classes for form elements</title>
<meta charset="utf-8"/>
<link href="myStyle.css" rel="stylesheet"/>
</head>
<body>
 
<form>
Text: <input type="text" required/><br />
Email: <input type="email" placeholder="[email protected]"/><br />
<input type="submit" value="done!"/>
</form>
 
</body>
</html>

Here we have attached a stylesheet where we write css3 form element pseudo-class definition. Here we also take 2 input fields of type text and email respectively. We also make the text field as required. Also add a placeholder to the email input field to provide hint to the user.

CSS file
myStyle.css

input:required {
background-color: yellow;
}
 
input:valid {
background-color: lightblue;
}
 
input:invalid {
background-color: red;
}

Here the fields which has been specified as required will get a background-color of yellow. valid entries will have a lightblue input field background color, and invalid entry input fields background turns red color.

CSS3 pseudo-classes For Form Element: HTML5

[youtube https://www.youtube.com/watch?v=Yw5s0G1uQoA]

YouTube Link: https://www.youtube.com/watch?v=Yw5s0G1uQoA [Watch the Video In Full Screen.]

Note:
CSS3 introduces new form elements like email, number, date etc ..all these fields validate themselves. We need not write lengthy JavaScript code to make small validations – like, checking if the user entered numeric value in the input field marked as age. Since age input field will have a numeric input type, if the user enters any string, we can let the user know about the wrong entry by making use of these css3 introduced pseudo-classes.

Also note that, if you try to submit the form without filling the required fields, you’ll get a little tool tip like message interface, telling you to fill the form field.

CSS Hover Over Effect On HTML Table: pseudo class

In this tutorial we are illustrating the css hover effect using html4 table and simple css coding.

The CSS pseudo class which is used to accomplish hover over effect is:

  :hover

HTML4 Table Syntax(table.html)

<html>
 <head>
  <title>Hover Over On Table</title>
  <link type="text/css" href="style.css" rel="stylesheet">
 </head>
 <body>
<table border="1">
<thead>
<td>Apple</td>
<td>Microsoft</td>
<td>Google</td>
</thead>
<tfoot>
<td>4</td>
<td>3</td>
<td>6</td>
</tfoot>
<tbody>
<tr>
<td>2</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
 </body>
</html>

[If you are used to old stay table syntax, then it’s completely OK to use this CSS Hover over technique on it. It’s not mandatory to use HTML4. ]
In HTML4, table mainly contains 3 parts. thead, tfoot and tbody.

thead represents the heading and the tfoot, the footer of the table. tbody represents the body except the head and the foot of the table.
In thead, I have taken “Apple”, “Microsoft” and “Google”.
In tfoot and tbody some random numbers for the purpose of illustration.

Just don’t try worry about these numbers, instead concentrate on the structure of the table.

  <link type="text/css" href="style.css" rel="stylesheet">

This line is very important, since it connects the HTML file and the CSS file.
This type of StyleSheet is called as external stylesheet.

Styling information of the HTML document. (style.css)

body {
font-family: verdana;
font-size: 24px;
}
 
table {
width: 400px;
}
 
thead { font-weight: bold; }
tfoot  { font-weight: bold; }
 
thead:hover { 
background-color: red; 
color: blue;
}
 
tfoot:hover {
background-color: yellow; 
color: blue;
}
 
tbody tr:hover {
background-color: green; 
color: blue;
}

Cascading Style Sheet
Here we apply all the styling property to the HTML file.

Make sure you try this :hover pseudo class with other html elements too. You can create very good user interface with the help of this simple CSS hover over effect.

Video Tutorial

YouTube Link: https://www.youtube.com/watch?v=BAk9qYQyBlY [Watch the Video In Full Screen.]

Please watch the above video tutorial in full screen.

Related:
You may also like: CSS Hover Over Effect on Lists

CSS Hover Over Effect ( CSS pseudo class )

There are many small simple tweaks in CSS that can highly enhance the over all design of a web page. CSS Hover Over Effect is one of them.

The CSS pseudo class which is used to accomplish hover over effect is:

 :hover

[youtube https://www.youtube.com/v/R3weCcjVylo]

YouTube Link: https://www.youtube.com/v/R3weCcjVylo [Watch the Video In Full Screen.]

Note: CSS pseudo classes doesn’t work on Internet Explorer. So while learning this, make sure you are using Chrome or Mozilla Firefox or Apple’s Safari.

We can apply hover over effect to almost any valid html element. Like: anchor tag, tables, lists etc.

Below is the coding for the example discussed in the above video:

 
<html>
 <head><title>Hover Over Effect In CSS2</title>
  <style type="text/css">
 
    li:hover {
        background-color: pink;
        width: 100px;
    }
 
  </style>
 </head>
 <body>
 
   <ul>
    <li>  Microsoft</li>
    <li>  Apple</li>
    <li>  Oracle</li>
   </ul>
 
 </body>
</html>

In the above example, we are applying hover over effect to a unordered list of elements. And we have changed the background color of the list item when the mouse hovers over the list item elements.

Make sure you try this :hover pseudo class with other html elements too. You can really create very good user interface with the help of hover over effect.