CSS/HTML5简洁蓝色带下拉框自定义搜索组件

CSS/HTML5简洁蓝色带下拉框自定义搜索组件

    • 说明
    • css代码
    • html代码
    • 演示效果图

说明

演示效果分辨率为1980x1080分辨率效果
高度可定制修改
纯css代码控制
select可以通过css控制 /option不支持css控制样式 想做出漂亮的下拉列表最后是自定义下拉组件

css代码

		.input-group {
				width: 550px;
				height: 50px;
				margin: 0 auto;
				margin-top: 46px;
				border: 1px solid #cccccc;

			}

			input[type="text"] {
				height: 48px;
				width: 340px;
				background: #FFFFFF;
				font-size: 14px;
				float: left;
				border: 0px solid #FFF;/* 必须加 可能配合下一句使用 */
				border-left: 1px solid #c0c0c0;
				padding-left: 15px;
				outline: none;

			}

			input,
			select,
			a:focus {
				outline: none;
			}

			button[type="submit"] {
				height: 50px;
				width: 50px;
				background: #2699FB;
				border: 0px solid #ff7496;
				float: right;
				cursor: pointer;

			}

			select[id="select"] {
				height: 50px;
				width: 142px;
				border: 0px solid #ff7496;
				float: left;
				color: #8f9db3;
				background-color: #FFF;
				padding-left: 15px;
				/* 鼠标触碰光标变手势 */
				cursor: pointer;
				/* 清除默认样式 */
				appearance: none;
				-webkit-appearance: none;
				-moz-appearance: none;
			}

			div[class="select"]:after {
			/* 给select添加右侧下拉图标 */
				content: "";
				width: 14px;
				height: 8px;
				background: url(下拉.png) no-repeat center;
				position: relative;
				float: left;
				margin-left: -30px;
				top: 22px;
				pointer-events: none;
			}

html代码


<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
	head>
	<body>
	
<div class="input-group">
			<div class="select">
				<select id="select" v-model="selected">
					<option class="option" value="today">当日代理人option>
					<option class="option" value="history">历史代理人option>
				select>div>
			<input type="text" id="input" class=" " placeholder="请输入代理人姓名进行查询" onfocus="this.placeholder=' ' " onblur=" this.placeholder='请输入代理人姓名进行查询' "
			 v-model="searchValue">
			 
			<span class=" ">
				<button id="button" class=" " type="submit" @click="goToSearch"><img src="搜索.png" />button>
			span>
		div>
	body>
html>

演示效果图

演示效果图上的图标、图片类,我已经上传到博客文件里。不能设置免费下载,大家体谅一下或者可以加我QQ来获取文件 1209793794
CSS/HTML5简洁蓝色带下拉框自定义搜索组件_第1张图片
CSS/HTML5简洁蓝色带下拉框自定义搜索组件_第2张图片
CSS/HTML5简洁蓝色带下拉框自定义搜索组件_第3张图片

你可能感兴趣的:(组件)