Wes’s Life

This is a quick tip for some­one who wants to replace every­thing in a input item with a type of submit. If you try the tra­di­tional text-​indent: -9999px method, it will work just fine in Fire­fox and Safari, but within IE7 and IE6 the whole button will be gone. Instead apply padding to the ele­ment equal to it’s height and then add over­flow: auto;.

Here’s my imple­men­ta­tion:

.search input.input-submit {
	background: transparent url('/img/search-button.png') no-repeat scroll 0 0;
	border: 0 none;
	width: 20px;
	height: 0px;
	padding-top: 21px;
	overflow: auto;
}

/* For IE7/6, place this in a separate style sheet and use conditional comments */
.search input.input-submit {
	height: 21px;
}