input样式美化

 

<template>
	<div class="box-search">
		<div class="bar-search panel">
			<input type="text" id="txt_search" autocomplete="off" :placeholder="placeholder" v-model="keyword">
			<button id="btn_search" class="iconfont icon-chahao" title="查询"></button>
			<button id="btn_advanced" class="iconfont icon-chahao" title="高级查询"></button>
		</div>
	</div>
</template>
<script setup>
	import {
		onMounted,
		onBeforeUnmount,
		ref,
		watch,
		computed
	} from "vue"

	//定义属性
	let keyword = ref(''); //查询关键字， input框输入的值，用v-model双向绑定

	let placeholderKey = ref('请输入地名地址关键字'); //查询提示
	let placeholderAdvanced = ref('请输入查询关键字'); //查询提示
	let placeholder = ref(placeholderKey); //查询提示
	
     onMounted(() => {

	});

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
	
	.box-search {
		position: absolute;
		z-index: 2;
		margin: 10rem;
	}

	.bar-search {
		width: 300rem;
		height: 40rem;
		border-radius: 2rem;
		position: relative;
	}

	.panel {
		box-shadow: 0 2rem 4rem rgb(0 0 0 / 20%), 0 -1rem 0 rgb(0 0 0 / 2%);
		border-radius: 2rem;
		// background: rgba(0, 44, 126, 1);
		border: 1px solid #fff;
	}

	.iconfont {
		font-family: iconfont !important;
		font-size: 16rem;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		color: #fff;
	}

	#txt_search {
		width: 260rem;
		height: 26rem;
		line-height: 26rem;
		float: left;
		border-right: 1rem solid #ddd;
		box-sizing: border-box;
		font-size: 15rem;
		margin: 7rem 0;
		color: #fff;
		padding-left: 10rem;
	}

	// 兼容不同的浏览器内核
	#txt_search::input-placeholder {
		color: #ddd;
	}

	#txt_search::-webkit-input-placeholder {
		//兼容WebKit browsers（Chrome的内核）
		color: #ddd;
	}

	#txt_search::-moz-placeholder {
		//Mozilla Firefox 4 to 18
		color: #ddd;
	}

	#txt_search::-moz-placeholder {
		//Mozilla Firefox 19+
		color: #ddd;
	}

	#txt_search::-ms-input-placeholder {
		//Internet Explorer 10+
		color: #ddd;
	}

	#btn_search {
		cursor: pointer;
		float: left;
		line-height: 40rem;
		margin-left: -40rem;
		width: 40rem;
		border: 0px solid red;
	}

	#btn_advanced {
		cursor: pointer;
		float: left;
		line-height: 40rem;
		margin-left: 0rem;
		width: 40rem;
		border: 0px solid red;
	}

	a,
	button,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	input,
	ol,
	p,
	textarea,
	th,
	ul {
		background: transparent;
		border: 0;
		border-radius: 0;
		font: inherit;
		list-style: none;
		margin: 0;
		outline: 0;
		overflow: visible;
		padding: 0;
		vertical-align: baseline;
	}

</style>