[分享]css3搜索框样式百度

CSS3搜索框样式百度，让你的搜索框更加美观和实用，提升用户体验。下面为大家分享一个简单的代码实现。/搜索框/ .searchbox{ :relative; height:40px; lineheig...

CSS3搜索框样式百度，让你的搜索框更加美观和实用，提升用户体验。下面为大家分享一个简单的代码实现。

/*搜索框*/
.search-box{
    position:relative;
    height:40px;
    line-height:40px;
    margin:0 auto;
    width:***px;
}
.search-box input{
    float:left;
    width:590px;
    height:36px;
    border:1px solid #ccc;
    border-right:none;
    font-size:14px;
    padding:0 10px;
    outline:none;
}
.search-box button{
    float:left;
    width:60px;
    height:38px;
    border:0;
    background-color:#f60;
    color:#fff;
    font-size:14px;
    cursor:pointer;
}
.search-box button:hover{
    background-color:#ff9e3b;
} 

以上代码实现了一个常见的搜索框样式，有输入框和按钮两个元素，输入框用 <input> 标签实现，按钮用 <button> 标签实现。下面是html代码的实现：

<div class="search-box">
    <input type="text" placeholder="请输入搜索内容">
    <button>搜索</button>
</div> 

完整的html和css代码如下：

<div class="search-box">
    <input type="text" placeholder="请输入搜索内容">
    <button>搜索</button>
</div>

/*搜索框*/
.search-box{
    position:relative;
    height:40px;
    line-height:40px;
    margin:0 auto;
    width:***px;
}
.search-box input{
    float:left;
    width:590px;
    height:36px;
    border:1px solid #ccc;
    border-right:none;
    font-size:14px;
    padding:0 10px;
    outline:none;
}
.search-box button{
    float:left;
    width:60px;
    height:38px;
    border:0;
    background-color:#f60;
    color:#fff;
    font-size:14px;
    cursor:pointer;
}
.search-box button:hover{
    background-color:#ff9e3b;
} 

通过以上代码的实现，我们可以得到一个美观实用的搜索框，可以直接在自己的网站中使用，提升用户体验。