Style trigger effect of web page input box

Style trigger effect of web page input box
<br />This example mainly studies two parameters, onblur and onFocus. Because these two parameters were rarely encountered before, Baidu immediately understood that onblur is an event triggered when the control loses focus, and onFocus is an event triggered when it becomes the input focus. These two parameters can be combined with className to directly call the style sheet class name.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title></title>
</head>
<body>
<style type="text/css">
.input1{
font-family: verdana;background-color: #EEEEEE;border-bottom: #FFFFFF 1px solid;border-left: #CCCCCC 1px solid;border-right: #FFFFFF 1px solid;border-top: #CCCCCC 1px solid;font-size: 12px;
}
.input1-bor {
font-family:verdana;background-color:#F0F8FF;font-size: 12px;
border: 1px solid #333333;}
</style>
<table cellspacing=2 cellpadding=0 width=300 border=0>
<tr>
<td><font class="en1">Name:</font> </td>
<td><input size=40 name=name class="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'">
</td>
</tr>
<tr>
<td><font class="en1">Email:</font></td>
<td><input size=40 name=email class="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'"></td>
</tr>
<tr>
<td><font class="en1">Website:</font> </td>
<td><input size=40 name=url class="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'">
</td>
</tr>
<tr>
<td><font class="en1">Topic:</font> </td>
<td><input size=40 name=subject class="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'">
</td>
</tr>
<tr>
<td><font class="en1">Content: </font> </td>
<td><textarea name=message rows=5 cols=35 class="input1" onblur="this.className='input1'" onfocus="this.className='input1-bor'"></textarea></td></tr></table>
</body>
</html>

<<:  Docker and Docker-compose one-click installation tutorial (supports online and offline)

>>:  Solution to navicat automatically disconnecting from the database after a period of time

Recommend

Vue Element front-end application development to obtain back-end data

Table of contents Overview 1. Acquisition and pro...

JavaScript removes unnecessary properties of an object

Table of contents Example Method 1: delete Method...

HTML table tag tutorial (26): cell tag

The attributes of the <TD> tag are used to ...

Detailed installation tutorial of mysql 5.7.11 under Win7 system

Operating system: Win7 64-bit Ultimate Edition My...

The process of using vxe-table to make editable tables in vue

There is a table in the project that needs to be ...

English: A link tag will automatically complete href in IE

English: A link tag will automatically complete h...

VMware Workstation 14 Pro installation and activation graphic tutorial

This article shares the installation and activati...

How to reset Zabbix password (one-step)

Problem Description Since we don't log in to ...

Practice of realizing Echarts chart width and height adaptation in Vue

Table of contents 1. Install and import 2. Define...

HTML table tag tutorial (8): background image attribute BACKGROUND

Set a background image for the table. You can use...

A brief introduction to Linux performance monitoring commands free

When the system encounters various IO bottlenecks...

More popular and creative dark background web design examples

Dark background style page design is very popular...

Nginx server adds Systemd custom service process analysis

1. Take nginx as an example Nginx installed using...

Method for realizing Internet interconnection by VMware virtual machine bridging

After installing VMware and creating a new virtua...

How to get the dynamic number of remaining words in textarea

I encountered a case at work that I had never wri...