How does CSS make a nice search box style? (code example)

This article introduces a nice CSS search box style, hoping to help interested friends.

A concrete example of CSS search box style code is as follows:

<div class= "Search bar" >    <form>        <input placeholder= "CSS search box code test" name= "CNAME" type= "text" >        <button type= "Submit" ></button>    </form></div>

The style code is as follows:

* {    box-sizing:border-box;} Div.search {    padding:10px 0;} form {    position:relative;    width:300px;    margin:0 Auto;} Input,button {    border:none;    Outline:none;} input {    width:100%;    height:42px;    padding-left:13px;} button {    height:42px;    width:42px;    Cursor:pointer;    Position:absolute;}     . Bar Input {    border:2px solid #c5464a;    border-radius:5px;    background:transparent;    top:0;    right:0;}. Bar button {    background: #c5464a;    border-radius:0 5px 5px 0;    width:60px;    top:0;    right:0;}. Bar Button:before {    content: "Search";    font-size:13px;    Color: #F9F0DA;}

The above search box CSS code test results such as:

Note:

All major browsers support <button> tags.

<input> tags are used to collect user information. The input field has many forms, depending on the value of the type attribute. The input field can be a text field, a check box, a masked text control, a radio button, a button, and so on.

<button> tag defines a button. Inside the button element, you can place content, such as text or an image. This is the difference between the element and the button created by using the INPUT element.

If you use the button element in an HTML form, different browsers submit different values. Internet Explorer submits the text between <button> and <button/>, while other browsers submit the contents of the Value property. Use the INPUT element in an HTML form to create a button.