Mimic apple.com globalsearch input field with HTML and CSS

问题

OK, so if you check out http://www.marioplanet.com you can see that I am trying to mimic the design of apple.com for my menu bar, including my global search bar.

Now, I'm trying to mimic Apple's input field for the global search bar, as close as I possibly can, so I need some help here.

I would like the field to be centered in the middle, which I tried by using maring: auto auto; but that did not work..

I also would like to use the rounded corner technique, from Apple's site, but I'm not sure how to do that. Is that CSS3?

I also need to have a grayed out placeholder string reading Search but I think I may be able to use JS for that. If can use HTML or CSS, please let me know.

The little spotlight / magnifying glass image aligned to the left side of the input field is nice, but not necessary :)

OK, you can check out the site, but here is the code as well:

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; }

Thanks!

回答1:

On the div containing the textbox try text-align: center; border-width: 0px; margin-top: 6px; to do the watermark try a jquery watermark plugin

For the rounded corners apple are inserting images into spans either end. I have seen the magnifying glass done this way or by setting the image as a background-image and adding padding to avoid overwriting it.

If I were you id download firebug for firefox so you can explore the markup and css yourself, it's quite easy.

Hope this helps.

回答2:

I used Firebug and Web Developer extension to find following...

Apple definately use javascript ( and of course css) to make that search box look preety.

if you turn of javascript using noscript you will see a normal square text box.

you can check following javascript and css files to figure out whats going on.

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

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

in css files take a look at following rule set

#globalsearch .search-wrapper .left

and

#globalsearch .search-wrapper .right

following are the images used to create the search box

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

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

I found following interesting things.

They have dedicated script file just to make that search box look pretty
They do not use image sprites.
I tried to smush one of the above images and was able to smush it by 15% ( it might look trivial but when you are looking at website visited by millions this can become a big number )

来源：https://stackoverflow.com/questions/3494533/mimic-apple-com-globalsearch-input-field-with-html-and-css

标签

html

css

input

textinput