How to make a good-looking search box style with css? (code example)

This article introduces a good-looking CSS search box style to everyone. I hope it will be helpful to interested friends.

The specific example of the css search box style code is as follows:

<div class="search bar">
    <form>
        <input placeholder="css搜索框代码测试" 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:"搜索";
    font-size:13px;
    color:#F9F0DA;
}

The above search box css code test effect As shown below:

Note:

All major browsers support the tag.

tag is used to collect user information. Input fields can take many forms depending on the value of the type attribute. Input fields can be text fields, checkboxes, masked text controls, radio buttons, buttons, etc.

tag defines a button. Inside the button element, you can place content, such as text or images. This is the difference between this element and buttons created using input elements.

If you use button in an HTML form element, different browsers will submit different values. Internet Explorer will submit vs. text in between, while other browsers will submit the contents of the value attribute. Please use input elements in HTML forms to create buttons.

【Recommended related articles】

Css to create a good-looking search box

HTML to implement fixed floating semi-transparent search on the mobile side Box

Share 8 CSS3 search boxes

The above is the detailed content of How to make a good-looking search box style with css? (code example). For more information, please follow other related articles on the PHP Chinese website!