搜索框样式

最新推荐文章于 2020-12-12 16:47:04 发布

dae bal

最新推荐文章于 2020-12-12 16:47:04 发布

阅读量2.1k

点赞数 2

分类专栏：前端 css

本文链接：https://blog.csdn.net/baidu_39043816/article/details/108573561

版权

前端同时被 2 个专栏收录

164 篇文章 2 订阅

订阅专栏

css

47 篇文章 0 订阅

订阅专栏

样式一：

<!DOCTYPE html>
<html style="font-size: 62.5%;">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			.clearfix{display: block;}
			.clearfix{content: " ";display: block;height: 0;clear: both;visibility: hidden;overflow: hidden;}
			.pos-r{position: relative;}
			/* 设置input框placeholder的属性 */
			.input-search input::-webkit-input-placeholder{color: #999;}
			.input-search input::-moz-placeholder{color: #999;}
			.input-search input:-ms-input-placeholder{color: #999;}
			
			.input-search-btn{position: absolute;top: 0;right: 0;height: 100%;padding: 0 10px;border: none;background-color: #0078bf;}
			.input-search-btn .icon{margin: 0 3px;color: #fff;font-size: 1.5rem;}
			.input-search .form-control{border-radius: 0;border-width: 2px;border-color: #0078bf;background-color: transparent;padding-right: 62px;}
			.form-control{font-size: 1.5rem;line-height: 1.571429;display: block;width: 100%;padding: .429rem .929rem;border: 1px solid #0078bf;background-image: none;-webkit-background-clip: padding-box;background-clip: padding-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;height: 3.5rem;-webkit-transition: -webkit-box-shadow .25s linear,border .25s linear,color .25s linear,background-color .25s linear;-o-transition: box-shadow .25s linear,border .25s linear,color .25s linear,background-color .25s linear;transition: box-shadow .25s linear,border .25s linear,color .25s linear,background-color .25s linear;-webkit-appearance: none;-moz-appearance: none;}
		</style>
	</head>
	<body>
		<div class="" style="width: 20vw;">
			<div class="pos-r input-search">
				<button class="input-search-btn"><i class="icon" onclick="search2();"><svg t="1600049842637" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1834" width="30" height="30"><path d="M936.07924064 843.92205756l-182.23171789-182.23171784c41.91329511-55.97117051 64.56209435-123.91756816 64.56209433-194.72760714 0-179.62840764-146.30603635-325.93444399-325.934444-325.93444401s-325.93444399 146.30603635-325.934444 325.93444401 146.30603635 325.93444399 325.934444 325.934444c77.05798358 0 149.43000865-26.29343356 207.48382738-74.45467334l180.66973171 180.66973176 55.45050847-55.19017744zM492.47517308 728.07475119c-143.96305712 0-260.85168762-117.14896149-260.85168761-260.85168757s117.14896149-260.85168762 260.85168761-260.85168763c143.96305712 0 260.85168762 117.14896149 260.85168759 260.85168763 0 67.42573564-25.51244051 131.20683689-71.85136302 179.88873864-49.72322588 52.06620511-116.88863049 80.96294896-189.00032457 80.96294893z" fill="" p-id="1835"></path></svg></i></button>
				<input type="text" class="form-control" size="30" placeholder="搜索" name="kw" value="">
			</div>
		</div>
		<script type="text/javascript">
			function search2() {
				var v = $("#search_form input").val();
				if (v == '') {
					return false;
				} else {
					$('#search_form').submit();
				}
			}
		</script>
	</body>
</html>

样式二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			.search{width:80px;height:40px;border-radius:40px;border:2px solid lightblue;position: absolute;right:200px;outline:none;text-indent:12px;color:#666;font-size:16px;padding:0;-webkit-transition:width 0.5s;}
			.search:focus{width:200px;}
		</style>
	</head>
	<body>
		<input class="search" type="text" placeholder="搜索...">
	</body>
</html>