When doing prize information online, I often see some registration forms with only one line for you to fill in, just like the fill-in-the-blank questions in exam papers, which is very cool!
In fact, it is not difficult to achieve such an effect. You only need to use a very short CSS code to achieve it!
| The following is the quoted content: < style type="text/css"> < !-- .xian{BORDER-LEFT-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none} --> </style> |
The function of the code is as follows:
| The following is the quoted content: "BORDER-LEFT-STYLE: none": Do not display the left border "BORDER-RIGHT-STYLE: none": Do not display the right border "BORDER-TOP-STYLE: none": Do not display the top border "BORDER-bottom-STYLE: none" ": Do not display the upper border. If you add this, there will be no border at all. |
Let’s take a look at an application example:
| The following is the quoted content: <html> <head> <title>Fill in the blanks online</title> < style type="text/css"> < !-- .xian{BORDER-LEFT-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-TOP-STYLE: none ;} --> </ /style>< !--Note: This section is css code. Changing parameters here can set a cooler effect--> </head> < body bgcolor="#FFFFFF" text="#000000"> Hide your borders <p>Username: < input type="text" name="name" class=xian> <!--Note: class= must be added, set your css to be applied in the form--> < /p> < /body> < /html> |
The effect achieved is simple and refreshing. How about changing your form too!