Hi, I am freelance web designer. I have some issue regarding search field. I like search filed to work as it is in apple.com or similar to that. I have try it but won't work in IE. http://www.freelancerkaleem.com/apple/applemenu.html CSS code: #search { padding-top:6px; float:left; margin-left:6px; } #search input[type="text"] { background: url(search-white.png) no-repeat 10px 6px /*#444*/; border: 0 none; font: bold 12px Arial,Helvetica,Sans-serif; color: #d7d7d7; width:80px; padding: 6px 15px 6px 35px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 3px 3px rgba(0, 0, 0, 0.2) inset; -webkit-transition: all 0.7s ease 0s; -moz-transition: all 0.7s ease 0s; -o-transition: all 0.7s ease 0s; transition: all 0.7s ease 0s; } #search input[type="text"]:focus { background: url(search-dark.png) no-repeat 10px 6px #fcfcfc; color: #6a6f75; width: 115px; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); } HTML: HTML Code: <form method="get" action="/search" id="search"> <input name="q" type="text" size="40" placeholder="Search..." /> HTML: Can we fix IE problem. I try so many code but doesn't work. Need your help