Take advantage of the enthusiasm, quickly write down their first simple book. What I want to share today is how to use html + css to write a search box that I am satisfied with. To confess, when I was just learning html, I was puzzled by this problem for a long time, which has not been solved.
Here is the basic idea:
First, define a div to enclose the input and button, then give a border to the Div. input and button are set to have no border, then use relative positioning to locate the button to the right end of the div, and then you can get the following effect:
Design sketch
The code is attached below:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My search page</title> <style type="text/css"> *{ padding: 0; margin: 0; } /* Name */ .title{ text-align: center; font-size: 25px; font-weight: bold; color: cadetblue; margin-top: 100px; margin-bottom: 20px; font-family: fantasy; } /* Here is the search box style */ .searchBox{ width: 40%; height: 35px; border: 1px solid cadetblue; outline: hidden; border-radius: 2px; margin: 0 auto; position: relative; } .inputBox{ border: none; width: 90%; height: 35px; line-height: 35px; outline: none; } .searchBtn{ width: 65px; height: 35px; border: none; position: absolute; right: 0; outline: none; color: white; font-size: 15px; background-color: cornflowerblue; } </style> </head> <body> <div class="title"> <p>I tell you</p> </div> <div class="searchBox"> <input class="inputBox" placeholder=" I will tell you all you want to know!"> <button class="searchBtn">search</button> </div> </body> </html>
If you think it's OK, just like it~