模板:CrablePotionCSS/动态搜索栏.css

/* THANKS FOR CRABLEPOTION. */
.vector-search-box-input {
	color: #000;
	height: 2.45em;
	border: 2px solid #a2a9b1;
	border-radius: 4px;
	background-color: #fdf6e6;
	padding: 0 0 0 6px;
	box-sizing: border-box;
	font-size: 0.8125rem;
	width: 60%;
	transition: all 0.4s ease-in-out;
}

.vector-search-box-input:focus {
	width: 100%;
}

.searchButton {
	position: absolute;
	bottom: 1px;
	right: 40%;
	min-width: 28px;
	width: 2.45em;
	text-indent: -99999px;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	z-index: 1;
	transition: all 0.4s ease-in-out;
}

.vector-search-box-input:focus~.searchButton {
	right: 0;
}