• 技术文章 >web前端 >html教程

    html中圆角搜索框怎么做

    藏色散人藏色散人2021-02-24 11:54:30原创93

    html中圆角搜索框的实现方法:首先创建一个HTML示例文件;然后创建一个form标签;接着定义好input输入框;最后通过“border-top-left-radius”等属性实现圆角搜索框即可。

    本教程操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

    html中圆角搜索框怎么做?

    非常简单,主要用到css中的border属性,代码示例如下:

    <!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>

    运行效果如下:

    bdb1a33197aef234de8f502134839ee.png

    【推荐:css视频教程

    以上就是html中圆角搜索框怎么做的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:html
    上一篇:在html中white-space是什么 下一篇:html中button标签的用法
    第15期线上培训班

    相关文章推荐

    • html文字居中的样式是什么• php 去掉html标签的函数• html文档由哪几部分组成• html中div是什么• 在html中white-space是什么

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网