CSS translation series _ (use simple CSS techniques to enhance your input fields)

Original address http://www.jankoatwarpspeed.com/post/2008/07/27/Enhance-your-input-fields-with-simple-CSS-tricks.aspx

 

The wording of the first translation of technical articles should be inappropriate. We also ask readers to criticize and correct the wording. I hope you will not give me any further advice.

It is found that there is a misunderstanding in the Translation of technical books in China. It may not be a misunderstanding, but it is insufficient in ability. Once many excellent technical books are translated into Chinese, it will lead to a piece of buzz. You may wish to go to Douban.

 

According to the younger brother's ignorance, this kind of phenomenon can be roughly divided into two types: first, the translator's lack of English skills and professional vocabulary. This kind of translation books is basically a waste of people, I insulted the author and insulted the reader again. Second, the translator's level is sufficient, but the translator's literary level is not flattering. The statements are far-fetched and difficult to understand,

 

After talking about this, I feel like I have made a set for myself. Once the translation below cannot satisfy your taste, I feel embarrassed to put a rock on my feet.

Use simple CSS techniques to enhance your input fields

We will try to build an efficient and nice-looking web form. But there will always be a new challenge. If you read my previous articles on how to build a decent form, you should note that there are so many details, such as label layout, text highlighting, and element alignment. However, some simple CSS techniques can make a common and boring web form more interesting.

 

The example you will see is the blog comment form that you use every day. How will you enhance your form?

 

Preparation:

 

 <div id="inputArea">        <label for="txtName">            Name</label>        <input id="Text16" type="text" />        <label for="txtEmail">            Email</label>        <input id="Text17" type="text" />        <label for="txtWebsite">            Website</label>        <input id="Text18" type="text" />        <label for="txtComment">            Comment</label>        <textarea id="Textarea6" rows="4" cols="30"></textarea></div>

 

... Add borders

 

At least you can add borders and padding to your form fields. The above two examples show that you can set the border color to match your color pattern, and adding padding to your input field is also a good practice. This will make the form look clearer. In this example, set the input and textarea 4px

 

#inputArea{    font-family: Arial, Sans-Serif;    font-size: 13px;    background-color: #d6e5f4;    padding: 10px;}#inputArea input[type="text"], #inputArea textarea{    font-family: Arial, Sans-Serif;    font-size: 13px;    margin-bottom: 5px;    display: block;    padding: 4px;    border: solid 1px #85b1de;    width: 300px;}

Let's quickly review the above Code. This is the code written for the second example. The entire form is a light blue background # d6e5f4 and 10px padding. Each input element is displayed in blocks to ensure that tags are placed above the input field. Now, this is simple. But you can do more.

 

... Add background

 

You can also add some solid background as in the following example.

#inputArea input[type="text"], #inputArea textarea{    font-family: Arial, Sans-Serif;    font-size: 13px;    margin-bottom: 5px;    display: block;    padding: 4px;    border: solid 1px #85b1de;     width: 300px;    background-color: #EDF2F7;}

Or you can add some gradient as the background. The following example shows the gray and blue gradient.

#inputArea input[type="text"], #inputArea textarea{    font-family: Arial, Sans-Serif;    font-size: 13px;    margin-bottom: 5px;    display: block;    padding: 4px;    border: solid 1px #85b1de;    width: 300px;    background-image: url( 'blue_bg.png' );    background-repeat: repeat-x;    background-position: top;}

This tip is simple and only includes the last three pieces of code, adds a gradient image as the background, sets it to repeat-X, and places it at the top of the field. Easy to use

... Add some actions

 

It is very simple to make the input field activated different from other fields, as shown in.

 

 

#inputArea input[type="text"]:focus, #inputArea textarea:focus{    background-image: none;    background-color: #ffffff;    border: solid 1px #33677F;}

As you can see, the code is very simple. Each time when the field gets the focus, a different style will be applied, which changes the background and border. But wait! It cannot work on ie !! Therefore, we have to use JS (or jquery) for help. Okay, you know I'm kidding.

#inputArea input, #inputArea textarea{    font-family: Arial, Sans-Serif;    font-size: 13px;    margin-bottom: 5px;    display: block;    padding: 4px;    width: 300px;}

Apart from the background and border, we will define all styles for the input field and text box.

 

.activeField{        background-image: none;        background-color: #ffffff;        border: solid 1px #33677F;}.idle{    border: solid 1px #85b1de;    background-image: url( 'blue_bg.png' );    background-repeat: repeat-x;    background-position: top;}

Next, we will define two classes, they will set the style in idle and active state,
Jquery is used here,

$(document).ready(function(){    $("input, textarea").addClass("idle");        $("input, textarea").focus(function(){            $(this).addClass("activeField").removeClass("idle");    }).blur(function(){            $(this).removeClass("activeField").addClass("idle");    });});

Now I can work on IE. Of course, it can also work on Firefox. These codes do three things: initialization, adding the "idle" class to all input statements and defining the behavior for the focus and blue events may not be perfect, but it can work,

What else can you do?

 

Test

Use different colors, border sizes, and backgrounds. You can add the hover function. Try and get rid of boring forms!