SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast freelancekaleem's Avatar
    Join Date
    Dec 2010
    Location
    Pakistan
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb Apple type Search Box ?

    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:

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

    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

  2. #2
    SitePoint Zealot sularome's Avatar
    Join Date
    Jan 2006
    Location
    Poland
    Posts
    147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Transitions are not supported in IE for now. You will have to use some javascript.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •