Member Avatar for kaleem_ullah

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.

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 Code:

<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Search..." />

Can we fix IE problem. I try so many code but doesn't work.
Need your help

Edited by kaleem_ullah because: n/a
  • 2 Contributors
  • 1 Reply
  • 128 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Dandello

Dani AI

Generated

The demo from is exactly the kind of CSS3-based UI that trips up older IE builds: rounded corners, shadows, and transitions are all “enhancements” that some IE versions either ignore or implement differently. is right that there are IE-specific tricks, but they’re brittle. Two practical, reliable paths:

  1. Progressive fallback (robust): bake the rounded shape, shadow and search icon into a small PNG sprite so every browser—old IE included—gets the same base look. Use CSS to swap the sprite position on focus and let modern browsers animate the width with transitions. Provide a tiny JS fallback (jQuery animate) for browsers without CSS transitions so the expand-on-focus still works.

  2. Polyfill for older IE (selective): keep your CSS3 rules for modern browsers, and add targeted fixes for IE6–8 only where needed. CSS3 PIE can bring border-radius and box-shadow into those older IEs (with caveats). For transitions, use a short JS fallback; for text-shadow there’s no reliable non-image equivalent in old IE, so accept a graceful degradation or fake it with duplicated text if you must.

Example patterns (use different filenames/paths than your demo):

/* default sprite + modern CSS3 */
.search-wrap .search-input {
  width: 80px;
  padding: 6px 10px 6px 36px;
  background: url('/images/search-sprite.png') no-repeat 10px center;
  border: none;
  border-radius: 16px;
  transition: width .25s ease;
}

/* focus state */
.search-wrap .search-input:focus {
  width: 130px;
  background-position: 10px -40px;
}
/* small JS fallback when transitions not supported */
if (!('transition' in document.documentElement.style)) {
  $('.search-input').focus(function(){
    $(this).stop().animate({width:'130px'},250);
  }).blur(function(){
    $(this).stop().animate({width:'80px'},250);
  });
}

Quick checklist when debugging IE:

  • Use a standards DOCTYPE so rendering is predictable.
  • Don’t rely on input[type="text"] if you need IE6/7 support—use a class.
  • If using CSS3 PIE, serve the .htc from the same domain and use an absolute path.
  • Test with IE’s compatibility view / developer tools.

Support references and polyfill info: border-radius support, box-shadow support, transitions support, and CSS3 PIE.

Member Avatar for Dandello

I assume you're referring to the box-shadow, text-shadow, and rounded corners.
IE can show the box-shadow using a filter:

-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333333')"

; (You can change out the direction, color and opacity.)

But for rounded corners, there a a few fixes out there, but I haven't gotten any of them to work well, although others have had more luck.

Text-shadow - haven't found anything that works in MSIE8 or below.

Edited by Dandello because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.