使用 HTML 和 CSS 模仿 apple.com 的 globalsearch 输入字段

Posted 2023-04-18

【中文标题】使用 HTML 和 CSS 模仿 apple.com 的 globalsearch 输入字段

【英文标题】：Mimic apple.com globalsearch input field with HTML and CSS

【发布时间】：2011-03-30 12:02:06

【问题描述】：

好的，如果您查看http://www.marioplanet.com，您会发现我正在尝试为我的菜单栏（包括我的全局搜索栏）模仿 apple.com 的设计。

现在，我正在尝试模仿 Apple 的全局搜索栏输入字段，尽可能接近，所以我需要一些帮助。

我希望该字段居中，我尝试使用 maring: auto auto; 但这不起作用..

我也想使用 Apple 网站上的圆角技术，但我不知道该怎么做。那是 CSS3 吗？

我还需要一个灰色的占位符字符串Search，但我认为我可以使用 JS。如果可以使用 html 或 CSS，请告诉我。

与输入字段左侧对齐的小聚光灯/放大镜图像很好，但不是必需的:)

好的，您可以查看该站点，但这里也是代码：

index.htm:

<div id="globalheader" class="apple">
    <!--googleoff: all-->
    <ul id="globalnav">
        <li id="gn-home"><a href="index.htm">Home</a></li>
        <li id="gn-catalog"><a href="catalog.asp">Shop!</a></li>
        <li id="gn-about"><a href="about.htm">About</a></li>
        <li id="gn-contact"><a href="contact.htm">Contact</a></li>
        <li id="gn-media"><a href="media.htm">Media</a></li>

    </ul>
    <div id="globalsearch">
    <form id="searchform">
        <div>
        <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" />
        </div>

        <div id="suggestions"></div>

    </form>
    </div>
    <!--googleon: all-->
</div>

default.css：

body 
    background-color: #666666;
    font-family:Verdana, Arial, Helvetica, sans-serif;

#header 
    background-color: #DDDDDD;
    width: 1130px;
    margin: 0px auto;

#content 
    width: 1130px;
    margin: 0px auto;

#leftcol 
    background-color:#EBEBEB;
    width: 200px;
    height: 550px;
    font-size:14px;
    clear: both;
    float: left;

#detail 
    background-color:#FFFFFF;
    width: 730px;
    height: 550px;  
    font-size:12px;
    float: left;

#rightcol 
    background-color:#EBEBEB;
    width: 200px;
    height: 550px;
    font-size:14px;
    float: left;

#footer 
    background-color:#DDDDDD;
    width: 1130px;
    height:90px;
    font-size:12px;
    text-align:center;
    clear: both;
    margin: 0px auto;

h1 
    color: #FF0000;

h2 
    color:#FF0000;

a:link  
    color:#FF0000;

a:visited  
    color:#FF0000;

a:hover  
    color:#00FF00;

a:active  
    color:#FF0000;

img 
border:none;

#eznetseal 
text-align:center;

a.trayIcon 
position: relative;
top: 20px;

a.trayIcon:hover 
top: 7px;

#twittericon 
    left: 0px;  

#facebookicon 
    left: 22.5px;;

#youtubeicon 
    left: 45px;;

#tray 
position:relative;

#container 
    position:relative;
    margin-top: -40px;

#nav li 

 display: inline;

#features

    vertical-align: top;

globalsearch.css：

/* BASIC RESET */

body, div, img, p  padding:0; margin:0; 

a img  border:0 


/* HTML ELEMENTS */
body  font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; 

/* COMMON CLASSES */
.break  clear:both; 


/* SEARCH FORM */
#searchform  margin:auto auto; font-size:18px; 
#searchform div  color:#eeeeee; 
#searchform div input  font-size:18px; width:120px; 
#suggestions position: relative; left:235px; width:320px; display:none; 

/* SEARCHRESULTS */

#searchresults  border-width:1px; border-color:#919191; border-style:solid; width:320px; background-color:#a0a0a0; font-size:10px; line-height:14px; 

#searchresults a  display:block; background-color:#e4e4e4; clear:left; height:56px; text-decoration:none; 

#searchresults a:hover  background-color:#b7b7b7; color:#ffffff; 

#searchresults a img  float:left; padding:5px 10px; 

#searchresults a span.searchheading  display:block; font-weight:bold; padding-top:5px; color:#191919; 
#searchresults a:hover span.searchheading  color:#ffffff; 

#searchresults a span  color:#555555; 
#searchresults a:hover span  color:#f1f1f1; 

#searchresults span.category  font-size:11px; margin:5px; display:block; color:#ffffff; 

#searchresults span.seperator  float:right; padding-right:15px; margin-right:5px;
            background-image:url(../images/shortcuts_arrow.gif); background-repeat:no-repeat; background-position:right; 

#searchresults span.seperator a  background-color:transparent; display:block; margin:5px; height:auto; color:#ffffff; 

谢谢！

【问题讨论】：

我只是喜欢他们的设计，尽管我的导航栏几乎是直接克隆的.. xD

【参考方案1】：

在包含文本框的 div 上尝试text-align: center; border-width: 0px; margin-top: 6px; 来做水印尝试jquery watermark plugin

对于圆角，苹果将图像插入到任意一端的 span 中。我已经看到放大镜是通过这种方式完成的，或者通过将图像设置为background-image 并添加填充以避免覆盖它。

如果我是你，请为 firefox 下载 firebug，这样你就可以自己探索标记和 css，这很容易。

希望这会有所帮助。

【参考方案2】：

我使用 Firebug 和 Web Developer 扩展来查找以下内容...

Apple 肯定使用 javascript（当然还有 css）来使搜索框看起来很漂亮。

如果您使用 noscript 关闭 javascript，您将看到一个普通的方形文本框。

您可以检查以下 javascript 和 css 文件以了解发生了什么。

http://images.apple.com/global/scripts/search_decorator.js

http://images.apple.com/global/nav/styles/nav.css

在 css 文件中查看以下规则集

#globalsearch .search-wrapper .left

和

#globalsearch .search-wrapper .right

以下是用于创建搜索框的图片

http://images.apple.com/global/nav/images/searchfield_leftcap.png

http://images.apple.com/global/nav/images/searchfield_rightcap.png

我发现了以下有趣的事情。

他们有专门的脚本文件，只是为了让搜索框看起来更漂亮 他们不使用图像精灵。 我尝试smush 上面的一张图片，并能够将其缩小 15%（这​​可能看起来微不足道，但当您查看数百万访问的网站时，这可能会变成一个大数字）

【讨论】：

嘿谢谢！！我喜欢他们如何命名他们的一门课程prettysearch哈哈。嗯，现在，对于那些 .search-wrapers，我似乎无法找出它们是如何插入到实际页面中的.. 没关系，它实际上是两个 s..

我不会使用他们的图片，创建你自己的，因为你没有他们的权利。

@madcapnmckay 我刚刚提供了图片链接，所以@BOSS 可以了解幕后发生的事情。当然，我们应该使用自己的图像。

好的，抱歉，好主意！你知道如何让光标输入时的蓝色高亮消失吗？

@BOSS ，不知道你在问什么。你能提供截图吗？我找不到你提到的蓝色突出显示