Self-made and beautiful input component (take the search input box as an example, including the source code)

Before reading this article, the reader needs to have a certain HTML + CSS technical skills.

Don't talk nonsense, first enclose the results of the search input box:

Analysis:

1. Component decomposition: Decomposition into the following parts:

1) outer layer: Add a container, such as Div

2) Inner layer:

An Input entry box

a button

2. Set the style:

1) Container style

Add border property, style code:

Border:solid 1px #ddd;

Add border rounded border, style code:

border-radius:5px

2) input box style

To remove the border style:

Border:none

To remove an outline style:

outline:0 none;

3) button style

Similarly, remove the border style

Border:none

Add a search background image style to the button:

Background-image:url ("Images/ico_sear.gif");
Background-repeat:no-repeat ;

Set display style to: inline

After this decomposition, I believe everyone is easy to understand.

Complete implementation code is attached:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >Search images as follows:


With such an example, we can also make a lot of similar components.

 
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
 
Self-made and beautiful input component (take the search input box as an example, including the source code)