Wie Erstellen Sie Abgerundete Suchfeld

Ich habe ein div mit einer Größe von 190x30 Pixel, und ein hintergrund-Bild des gleichen. Das Bild im hintergrund ein Rechteck mit abgerundeten Ecken und es sieht gut aus. Wenn ich das Textfeld in der div, der hintergrund wiederholt sich vertikal, so dass für einige Grund, das Suchfeld ist erforderlich 60 px vertikalen Raum... WARUM?
Ich sollte hinzufügen, dass in DreamWeaver wird Sie richtig angezeigt, aber im Chrome oder IE, es funktioniert nicht.

Haben Sie Bild?
Bitte poste den code, der relevant für die Frage. Ideal zusätzlich, um den code in die Frage Körper selbst, fügen Sie bitte einen jsFiddle Beispiel für dein problem. Es hilft uns Ihnen zu helfen.

InformationsquelleAutor Sam Clark | 2012-05-05

  1. 4

    CSS: 

    .round {
    width: 100%;
    border-radius: 15px;
    border: 1px #000 solid;
    padding: 5px 5px 5px 25px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

.corner {
    position: absolute;
    top: 3px;
    left: 5px;
    height: 20px;
    width: 20px;
    z-index: 10;
    border-radius: 10px;
    border: none;
    background: #000; /* Set the bg image here. with "no-repeat" */
}

.search {
    position: relative;
    width: 190px;
    height: 30px;
}

    HTML :

    <form id="search-form">
    <div class="search">
      <input type="text" name="search" class="round" />
      <input type="submit" class="corner" value="" />
    </div>
</form>

    Demo : http://jsfiddle.net/Bh4g3/

    Ich habe versucht, aber ich will ein Bild in diesem div - /Eingang,, dass, wenn geklickt wird, das Formular sendet.
    das ist nur eine schnelle Lösung, können Sie die <a> - tag die "Ecke" - Klasse, und legen Sie die bg-Bild, wie Sie benötigen.

    InformationsquelleAutor KBN

  2. 2

    Um zu verhindern, dass sich der hintergrund wiederholen, verwenden Sie dieses CSS-Deklaration:

    #element {
    background-repeat: no-repeat;
}
    Ich hab das auch, aber dann ist die search-box erscheint unter dem hintergrund...
    Passen Sie die Platzierung des Hintergrundbildes mit background-position: 0px 50px; oder ähnliches (siehe w3schools.com/cssref/pr_background-position.asp). Wenn Sie veröffentlichen Sie Ihren code, es wird einfacher für uns, das problem zu verstehen.

    InformationsquelleAutor Joe Mornin

  3. 0

    Können Sie versuchen, diese
    CSS

    #divName { background:url("image-src) no-repeat; height:30px; width:190px; }

    HTML

    <div id="divName"><input type="text" ></div>

    Und Sie können alles, was innerhalb des div "divName"

    InformationsquelleAutor Jhilom

Schreibe einen Kommentar