forxtu
8/24/2017 - 1:04 PM

Button inside input field

Button inside input field

<form>
	<div class="search">
		<input type="search" name="q">
		<input type="submit" value="">
	</div>
</form>
.search {
	width: 300px; /* Ширина поля с кнопкой */
	border: 1px solid #000; /* Параметры рамки */
	min-height: 20px; /* Минимальная высота */
}
input[type="search"] {
	border: none; /* Убираем рамку */
	outline: none; /* Убираем свечение в Chrome и Safari */
	-webkit-appearance: none; /* Убираем рамку в Chrome и Safari */
	width: 274px; /* Ширина поля */
	vertical-align: middle; /* Выравнивание по середине */
}
input[type="submit"] {
	width: 20px; /* Ширина кнопки */
	height: 20px; /* Высота кнопки */
	border: none; /* Убираем рамку */
	background: url(images/video.png) no-repeat 50% 50%; /* Параметры фона */
}