css实现网页标准搜索框

天给大家带来一种标准化的椭圆形的搜索框，话不多说，直接放图。

我相信大家在很多网页上一定见过这种搜索框，那么这种搜索框到底是怎么做的呢？不要着急，听我慢慢给您讲来。

我们会用到<input>标签来构建最基本的搜索框架构，用到<a>标签实现后面的搜全网的搜索按钮。
具体的html的代码很简单。

<form class="message"><input type="text" name="sousuo" class="input" placeholder="冬瓜搜索"/> </form> <a href="#" class="search">搜全网</a>

3. 下来就是用css来美化它了。这里我们会用到boder元素。

4. 话不多说直接放代码。

.message{position:absolute; left: 600px;top: 16px;} .input{width: 300px;height: 50px;font-size: 15px;padding-left: 20px;border: 1px solid #DCDCDC;border-top-left-radius: 25px;border-bottom-left-radius: 25px;background-color: #F5F5F5;}.input:focus{border-color: #FA8072;outline: none;color: #FA8072; }.search{position:absolute; left: 900px;top: 15.5px;width: 90px;height: 49.3px;border: 1px solid #DCDCDC;border-top-right-radius: 25px;border-bottom-right-radius: 25px;font-size: 16px;text-align: center;line-height: 48px;color: #FFFFFF;background-color: #FA8072;text-decoration: none;}.search:hover{background-color: #F08080;}

5. 在css代码中有一个关键的属性，那就是border-top-left-radius和border-bottom-right-radius以及其他的相反方向。

小伙伴们看明白了吗？快去动手试试吧。

文为大家介绍如何使用 CSS 创建一个带搜索的导航栏。

以下实例均是响应式的。

可以先看下效果图：

创建一个搜索栏

HTML 代码

</div>

CSS 代码

/* 在顶部导航栏中添加黑色背景颜色 */

.topnav {

overflow: hidden;

background-color: #e9e9e9;

}

TML如何制作在透明输入框里面添加图标

最近在写一个律师推荐前台的网站，在上面搜索框这里出现了问题，我想把搜索的图标放在搜索框里面，但是弄了半天都不大如意……

话不多说，我们直接进入主题：

基本思路

其实就把输入框与后面的图标一起放在一个div里面，然后将输入框的border设置为0px，最后设置div的border为最终的外边框

我们最直接上代码：HTML：

<div class="search">
        <form action="http://baidu.com">
           <input type="text" placeholder="请输入查找的律师或专长">
               <span>
                 <a href="#"><img src="img/icon1.png" alt=""></a>
               </span>
          </form>
</div>

CSS:这里是设置外面整个div的样式

.search {
    width: 250px;
    height: 35px;
    border: 1px solid white;
    border-radius: 30px;
}

这里是设置里面的输入框的长宽、boder为0px、里面的字体大小、点击不会亮边框(outline:none)设置透明度这里使用rgba()，最后一个属性就是透明度（在0-1之间）

在线咨询

上一篇：浏览器未安装flash插件提示实现代码
下一篇：网站开启灰色色调，4月4日全国哀悼！

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。