CSS Hacks to customize Input Types independently

June 23rd, 2006

When I was working on phpLiveTalk, I decided to have a background for the text inputs in forms. I couldn’t find a decent hack to make it work on both IE and Mozilla! So I came out with a solution! Here it is:

input[type="text"], input[type="password"], input[type="file"] {
	border: solid 1px #336699;
	color: #336699;
	background-image: url('images/input-text-bg.png');
}

/* this is for IE */
input {
	border: expression(this.type=="text" || this.type=="password" || this.type=="file" ? "solid 1px #336699" : "this.border");
	color: expression(this.type=="text" || this.type=="password" || this.type=="file" ? "#336699" : "this.color");
	_background-image: none;
	_background-image: expression(this.type=="text" || this.type=="password" || this.type=="file" ? "url('theme/default/images/input-text-bg.png')" : "this.background-image");
}

Working perfectly…