Home  >  Article  >  Web Front-end  >  How to make rounded search box in html

How to make rounded search box in html

藏色散人
藏色散人Original
2021-02-24 11:54:309631browse

How to implement the rounded search box in html: first create an HTML sample file; then create a form tag; then define the input input box; and finally implement it through attributes such as "border-top-left-radius" A search box with rounded corners will do.

How to make rounded search box in html

The operating environment of this tutorial: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

How to make a rounded search box in html?

It is very simple. It mainly uses the border attribute in css. The code example is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

<style>
    input[type=text] {
        color: #111;
        background-color: #c7dec6;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        padding:20px;
    }
</style>
</head>

<body>
<form action="http://www.baidu.com/baidu" target="_blank">
    <input type="text" name="word" size="60" 
    style="height: 30px;width: 1100px;background-color: #9a9a9a26;">
    <input type="submit" value="搜索" 
    style="border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding:20px;
height: 60px;width: 80px;
margin-left: 30px;
background-color: #1591ea;
font-size: large;
color: antiquewhite;">
</form>
</body>

</html>

The running effect is as follows:

How to make rounded search box in html

【Recommended: css video tutorial

The above is the detailed content of How to make rounded search box in html. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn