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

MySQL v5.7.18 decompression version installation detailed tutorial

Download MySQL https://dev.mysql.com/downloads/my...

Implementation of MySQL multi-version concurrency control MVCC

Transaction isolation level settings set global t...

Problem analysis of using idea to build springboot initializer server

Problem Description Recently, when I was building...

Use xshell to connect to the Linux server

Benefits of using xshell to connect to Linux We c...

Ubuntu 18.04 installs pyenv, pyenv-virtualenv, virtualenv, Numpy, SciPy, Pillow, Matplotlib

1. There are many Python version management tools...

Vue implements zoom in, zoom out and drag function

This article example shares the specific code of ...

Several reasons for not compressing HTML

The reason is simple: In HTML documents, multiple ...

Linux hardware configuration command example

Hardware View Commands system # uname -a # View k...

MySQL 8.0.23 free installation version configuration detailed tutorial

The first step is to download the free installati...

How to check and organize website files using Dreamweaver8

What is the purpose of creating your own website u...

Brief analysis of the introduction and basic usage of Promise

Promise is a new solution for asynchronous progra...

Use CSS content attr to achieve mouse hover prompt (tooltip) effect

Why do we achieve this effect? ​​In fact, this ef...

Five delay methods for MySQL time blind injection

Five delay methods for MySQL time blind injection...

How to install Graphviz and get started tutorial under Windows

Download and installConfigure environment variabl...

The process of deploying and running countly-server in docker in win10

I have just come into contact with and become fam...