h5+css3实现搜索框

html代码：

<!-- 搜索模块 -->
            <div class="search-form">

                <div class="search">
                    <input type="text" placeholder="语言开发">
                    <button>搜索</button>
                </div>

                <ul>
                    <li><a href="#">品优购首发 </a></li>
                    <li><a href="#">亿元优惠 </a></li>
                    <li><a href="#">9.9元团购 </a></li>
                    <li><a href="#">美满99减30 </a></li>
                    <li><a href="#">办公用品 </a></li>
                    <li><a href="#">电脑 </a></li>
                    <li><a href="#">通信 </a></li>
                </ul>
            </div>

css代码：

		header .search-form {
		    float: left;
		    margin-left: 172px;
		    width: 538px;
		    height: 61px;
		
		}
		header .search-form .search {
		    width: 538px;
			height: 36px;
			border: solid 2px #b1191a;
		}
		header .search-form .search input{
		    float: left;
		    width: 454px;
		    height: 32px;
		} 
		header .search-form .search input::placeholder{
		    text-indent: 10px;
		}
		header .search-form .search button{
		    float: left;
		    width: 80px;
			height: 32px;
			background-color: #b1191a;
		    font-size: 16px;
		    color: #ffffff;
}

效果图：