Eine Eingangstaste mit "Schiebetüren" gestalten

Question

Ich habe eine Webseite, die HTML von Drittanbietern verwendet, das ich nicht ändern kann. Ich kann jedoch das CSS-Stylesheet bearbeiten. Ich habe einen "Schiebetür" -Stil-Knopf, den ich gegen den Standard-Eingabeknopf auf der Seite tauschen möchte, aber ich kann mir nicht vorstellen, wie ich das nur mit CSS machen soll. Hier

ist der HTML-Code der Taste:

<div> 
    <input type="button" style="margin: 10px 0pt 0pt; width: 60px; height: 25px; font-size: 11px;" name="search_btn" value="Search" onclick="DoSearchSalesExpanded(searchform);"/> 
</div> 

Und hier ist die CSS einer bestehenden Schaltfläche, die ich habe, die verwendet die "Schiebetüren" Methode:

.clear { 
    /* generic container (i.e. div) for floating buttons */ 
    overflow: hidden; 
    width: 100%; 
} 
a.button_oval { 
    background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_a.gif') no-repeat scroll top right; 
    color: #222; 
    display: block; 
    float: left; 
    font: normal 12px arial, sans-serif; 
    height: 24px; 
    margin-right: 6px; 
    padding-right: 18px; /* sliding doors padding */ 
    text-decoration: none; 
} 
a.button_oval span { 
    background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_span.gif') no-repeat; 
    display: block; 
    line-height: 14px; 
    padding: 5px 0 5px 18px; 
} 
a.button_oval:active { 
    background-position: bottom right; 
    color: #000; 
    outline: none; /* hide dotted outline in Firefox */ 
} 
a.button_oval:active span { 
    background-position: bottom left; 
    padding: 6px 0 4px 18px; /* push text down 1px */ 
} 

Answer 1

Sie benötigen zwei Elemente für verschachtelte Hintergrundverbindungen (auch als Schiebetüren bezeichnet): eine äußere (Hintergrund) und eine innere (Vordergrund, der das Endstück des Hintergrundbildes enthält). Wenn Sie nur einen eigenständigen Eingang < haben> Sie stecken fest.

Wenn Sie einen Weg finden können, das < div> Sie erwähnt, Sie könnten das als das äußere Element, mit der Schaltfläche (mit seiner natürlichen Hintergrundfarbe entfernt) als die innere verwenden. Sie müssten sicherstellen, dass das äußere div die gleiche Breite/Höhe wie das innere < input> hat, aber vielleicht, indem Sie es nach links schweben lassen (um das 'shrink-to-fit'-Verhalten von Floats zu aktivieren). Sie müssen auch den oberen Rand auf der Schaltfläche berücksichtigen und auffüllen.

#something div { 
    float: left; 
    background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_a.gif') no-repeat 0 10px; 
} 
#something div input { 
    background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_span.gif') no-repeat; 
    border: none; 
    padding: 0; 
} 

Da jedoch die Taste in Frage ein Fest Pixel auf Seitengröße hat, brauchen Sie nicht wirklich verschachtelte Hintergründe überhaupt zu verwenden. Sie können nur einen Hintergrund mit den richtigen Maßen für die Schaltfläche erstellen.

Answer 2

Ihre einzige andere Option wäre, Javascript zu verwenden, um dynamisch die ... meine Schaltfläche Text ... Tags in der Regel für Schiebetüren Tasten eingesetzt. Dies wird jedoch nicht empfohlen, da es nicht mit deaktiviertem JS funktionieren wird.

Answer 3

Wenn Sie in der Lage sind, das Taste Element verwenden anstelle des Eingang Elements. Die folgenden Artikel sind sehr nützlich.

• http://jedisthlm.com/2008/03/27/flexible-css-buttons/
• http://robertnyman.com/2008/03/13/styling-buttons-and-achieving-sliding-doors-with-them/

Sie noch Art einreichen und veröffentlichen wie ein Eingang tut

jedoch verwenden können, wenn Sie mit dieser Taste als einreichen setzen, nur aufpassen, dass bei Verwendung von IE. Es wird auch den Inhalt der Schaltfläche übergeben, was eine Sicherheitsausnahme für .net Web-Apps ergibt.

* Edit, fand einen anderen Link als Original nicht mehr funktioniert