Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Borderless search boxes under HTML/CSS

  1. Question Borderless search boxes under HTML/CSS

    Okay, I am basically trying to replicate what Apple is doing on this page:

    http://www.apple.com/itunes/

    Right down by the "Today on the iTunes Music Store." I want the search box for my forum to look like this. I've checked the box in both Firefox and Safari, and it looks good in both.

    The problem is, if I have the search box be of type="text", Firefox and Safari both put a border around the box. If I use type="search", Firefox makes a nice plain white box, but Safari gets totally fancy with a circular box that screws up what I'm trying to do. If I use type="plain", Firefox makes a nice plain white box, but Safari makes a box with a border around it.

    All I want is a text entry box that is white, has no border, and is the size I tell it to be. What do I need to do here?

    Or, if nothing else, what do I need to do to totally rip off the way Apple is doing it on their page?
    WARNING: This post may contain violent and disturbing images.

  2. Do you mean this search box? Because it has borders. I checked it in both. Safari will not render CSS changes that get rid of borders and whatnot.
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	Picture 1.png 
Views:	254 
Size:	6.9 KB 
ID:	17298   Click image for larger version. 

Name:	Picture 1.png 
Views:	239 
Size:	8.5 KB 
ID:	17299  
    Last edited by Calliander; 02 Oct 2005 at 10:45 PM.

  3. The borders aren't the actual search box's borders - they are made via images. That's why I'm so confused as to how they made the box it is look the same in both Safari and Firefox with the same HTML and CSS code.
    WARNING: This post may contain violent and disturbing images.

  4. If their code works, why not just use it?

  5. The only thing in CSS that I notice are these three things:

    Code:
    #itmstop #itmssearch .srchimgs {margin: -2px 0 0 0; padding: 0;}
    html>body #itmssearch .srchimgs {margin-bottom: 0;}
    /*\*/
    html>body*#itmssearch .srchimgs {display: none;}
    I'll have to look at this a bit harder to figure it out.

  6. Quote Originally Posted by kedawa
    If their code works, why not just use it?
    I'm having a bit of trouble wrapping my brain around exactly how they're working things out. I've tried doing things their way, but I'm not getting the same results.

    This stuff goes along with the code you found, Calliander. The .sbox code seems to be part of the major formatting of the search box.

    #itmssearch select, #search input {font-size: 10px} #itmssearch input.sbox {color: #80808C; height: 12px; width: 130px; border: 0; background: white url(http://images.apple.com/itunes/image...bg20050907.gif) repeat-x left top; padding: 3px;} #itmstop #itmssearch .srchimgs {margin: -2px 0 0 0; padding: 0;} html>body #itmssearch .srchimgs {margin-bottom: 0;}
    Oh, and here's the way I'm trying to do it.

    Here is the code in my HTML file:

    <div class="searcharea">
    <center>
    <form action='{ipb.script_url}act=Search&amp;CODE=01&amp;forums=all' method='post'>
    <input type="plain" style="background: #FFFFFF; border: 0px; height: 13px;" size='18' name='keywords' onfocus="this.value=''" value='Enter words to search...' />
    </form>
    </center>
    </div>
    And then the CSS code for that main div

    .searcharea {
    background: url(<#IMG_DIR#>/search.png);
    position: fixed;
    width: 156px;
    height: 19px;
    top: 25px;
    right: 10px;
    z-index: 20;
    }
    WARNING: This post may contain violent and disturbing images.

  7. Code:
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <head>
    <style type="text/css">
    INPUT {
        FONT-SIZE: 9px
    }
    .sbox {
      border-width:0px; padding: 3px; BACKGROUND: white url('http://images.apple.com/itunes/images/searchbg20050907.gif') repeat-x left top; WIDTH: 130px; COLOR: #80808c; HEIGHT: 12px;
    }
    </style>
    </head>
    <body>
    <form id="search" action="http://phobos.apple.com/WebObjects/MZSearch.woa/wa/com.apple.jingle.search.DirectAction/search?term=" method="get" name="search">
      <table border="0" cellspacing="0" cellpadding="0">
      <TR>
      <TD><img src="http://images.apple.com/itunes/images/searchleftcap20050907.gif" border="0" width="16" height="18"></TD>
      <TD valign=top><input class="sbox" onclick="if(this.value=='Search iTunes Music Store')this.value='';" type="text" value="Search iTunes Music Store" name="term" results="5" size="20"></TD>
      <TD><img src="http://images.apple.com/itunes/images/searchrightcap20050907.gif" border="0" width="9" height="18"></TD>
      <TD><input type="submit" value="Go"></TD>
      </TR>
      </table>
    </form>
    </body>
    Alright, I ripped their code, made a few changes and now get consistent results in both FireFox and Internet Explorer 6. This should reproduce just their search box exactly. Even the first doctype line matters or else IE will not render the search box correctly.

    Question: Does Apple's page show up correctly with Safari? It may very well be the first line, "<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">" that makes the difference. I don't get consistent results between IE and FireFox without it as I mentioned.

    EDIT: Oops, you already answered my question actually. Yeah, then there should be no problem with this code.
    Last edited by NightWolve; 09 Oct 2005 at 07:20 AM.
    "Don't be a pansy." - James

  8. You are to be commended. I will try that out, and see if it works.
    WARNING: This post may contain violent and disturbing images.


  9. Quote Originally Posted by cka
    Except that it is broken in FireFox.
    WARNING: This post may contain violent and disturbing images.

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
  •  
Games.com logo