Apple like search box [closed]_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-08 19:29 出处：网络

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordi开发者_开发知识库narily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center. Closed 11 years ago.

I need exactly the same search box of apple.com for my website. I tried to grab it but no success. Can anyone help me to create something like that or grab it from apple.com?

http://jsfiddle.net/gHSp2/1/

That's what you're looking for http://www.bloggermint.com/2011/06/css3-search-box-inspired-by-apple-com/

This is probably what you want:

<style>
#search{
    width : 100px;
    background-color:gray;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    border-radius : 15px;
    outline:none;
}
</style>
<input id='search' onfocus='this.style.width="120px";this.style.backgroundColor="white"' onblur='this.style.width="100px";this.style.backgroundColor="gray"'>

Demo

Try this their's part of code:

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link id="globalheader-stylesheet" rel="stylesheet" href="http://images.apple.com/global/nav/styles/navigation.css" type="text/css" />
    <title>Apple</title>
</head>
<body>
    <script type="text/javascript">
    var searchSection = 'global';
    var searchCountry = 'us';
</script>
<script src="http://images.apple.com/global/nav/scripts/globalnav.js" type="text/javascript" charset="utf-8"></script>
<nav id="globalheader" class="apple">

    <div id="globalsearch">
        <form action="/search/" method="post" class="search" id="g-search"><div class="sp-label">
            <label for="sp-searchtext">Search</label>
            <input type="text" name="q" id="sp-searchtext" accesskey="s" />
        </div></form>
        <div id="sp-magnify"><div class="magnify-searchmode"></div><div class="magnify"></div></div>
        <div id="sp-results"></div>
    </div>
</nav>
<script type="text/javascript">
    AC.GlobalNav.Instance = new AC.GlobalNav();
</script>
<!-- SiteCatalyst code version: H.8. Copyright 1997-2006 Omniture, Inc. -->

</body>
</html>

Use js beautifier for theirs globalnav.js and inspect it for