<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜索框</title>
<style>
/*
relatvie相对定位、absolute绝对定位
相对定位也可以限制住absolute，但是这里为什么仍然要用absolute，暂时我也说不明白
*/
.pos_abs{position: absolute;}
/*初始化样式*/
#search input{width: 200px;}
#search input{height: 36px;border-radius: 40px;border: 0.5px solid #f9f9f9;background-color: #eee;padding: 2px 40px 0 20px;outline:none;transition: 1s;}
#search a{position: absolute;top: 2px;line-height:32px;right: 10px;}
/*获得焦点之后的样式*/
#search input:focus{transition: width 1s; width: 300px;}
#search input:focus + a {top: 3px;right:4px;width:30px;height:30px;border-radius: 50%;background-color: gray;color: #fff;}
</style>
<!-- 用的是bootstrap的图标，不使用bootstrap的话自行替换下面的span标签就可以了 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="search" class="pos_abs">
<input type="text" placeholder="搜索" />
<a> <span class="glyphicon glyphicon-search"></span></a>
</div>
</body>
</html>
CSS 实现类似简书的搜索框
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
