Question

我的网站需要与apple.com完全相同的搜索框。我试图抓住它但没有成功。任何人都可以帮我创建类似的东西或从apple.com抓取它吗？

Answer 1

这就是你要找的东西 http://www.bloggermint.com/2011/06/css3-search-box-inspired-by-apple-com/

Answer 2

试试这个代码的一部分：

    <!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>

对js beautifier使用globalnav.js并检查

只是想知道它是如何运作的

Answer 3

这可能是你想要的：

<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

Apple喜欢搜索框

3 个答案: