There are many ways to write a search box. The search box is a relatively detailed job, and you must first calculate its height and width;
Let me take the JD search box as an example to give you a brief analysis.
The above is the final search box rendering.
Send the code first>>>>>>>
<span style="color: rgb(255, 0, 255); font-size: 18pt;"><strong>HTML tag:</strong></span> <div><form><input type="text" name="search" placeholder="search practice"><button>Search</button> ------- Like JD.com, other websites, such as Baidu: are used by <input type="submit" name=""> tag. </form></div> CSS style: .center_child1{width:538px;height:36px; overflow:hidden;border:2px solid #BD1D17;}.center_child1 input{width:456px;height:24px; float:left; padding:6px 2px; ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- background-color:transparent; ------ Let the background color of the input label be transparent. border:none; ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- outline:none;font-size:16px;}.center_child1 button{width:76px;height:36px;float:right;background:#BD1D17;border:none;color:#fff;font-size:15px;}Summary: A search box has three main parts, one is the input box part (the left), the other is the search button part (the right), and one is the two large divs containing them;
1. First set the width, height and border color of the large div. This must be calculated in advance based on personal needs.
2. Float the left side of the input (input box part) respectively; float the right side of the button (button part), remember to use overflow: hidden; attribute for large divs;
3. Adjust the height and width of the input. Remember to use padding to support its height value, so that it will not stick to the border when entering the font, increasing the beauty; if the width value is slightly added to the left, for the beauty.
The above is the way to write the search search box introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!