一个搜索框的实现

<style type="text/css">
.dropdown{
    position: relative;
    margin: 100px auto;
    width: 300px;

}
.search-input {
    position:relative;
    bottom:-5px;
    padding:5px 14px;
    border: 2px solid #ccc;
    border-radius: 15px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
   
}

.search-input:focus {
    border:2px solid #729fcf;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);*/
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);*/
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);*/
}

.search-icon {
    position:absolute;
    top:10px;
    z-index:10;
    right:126px;
}
</style>

</head>
<body>
<div class="dropdown">
<input type="text" class="input-medium search-input" placeholder="搜索笔记">
<a class="search-icon" href="#">
<img src="./search.png" width="22px" height="22px">
</a>
</div>
</body>

Paste_Image.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容