✔ Submit / Reset Button gestalten

[Sprint]

Hallo,

in letzter Zeit häufen sich Lösungen um Formularelemente anders zu gestalten. Ist natürlich optimal, um ein Formular in allen Browsern gleich aussehen zu lassen. Mir geht es jetzt aber speziell um die Button Gestaltung und da wiederum um diese CSS3 Lösung. Solange ich sie auf normale Button anwende, ist alles gut. Nur die Submit und Reset Button spielen da nicht mit. Da wird das ganze ziemlich vermurkst. natürlich könnte man statt dessen normale Button einsetzen und per JS die entsprechenden Funktionen einbinden, nur geht dann beim Submit Button die Funktion der Enter-Taste verloren, ich kann also mit Enter kein Formular mehr abschicken sondern muß immer mit der Maus drauf klicken.

Deshalb meine Frage, wie kann ich (oder geht das überhaupt?) normale Button verwenden und mit der Enter-Taste das Formular absenden, ohne daß deren Funktion in Textfeldern verloren geht?

Schönes Wochenende,
Sprint

 

[one6666]

zb. eine Event Überwachung einschallten, die deine Tastertur überwacht und wenn Enter gedrückt wird schickst du die Daten mit Ajax ab,
wäre jetzt aber nur der erste gedanke

Oder du legst mittels Javascript den Focus auf den Button

 

[DeluXe]

[..] Da wird das ganze ziemlich vermurkst. [...]

Kannst du das etwas genauer beschreiben? Weil bei mir im Safari und Firefox macht es keinen Unterschied, auf welches Element ich das CSS anwende. Ausser ich habe bei meinem Test etwas übersehen.

 

[Sprint]

Kannst du das etwas genauer beschreiben? Weil bei mir im Safari und Firefox macht es keinen Unterschied, auf welches Element ich das CSS anwende. Ausser ich habe bei meinem Test etwas übersehen.

Ok, vermurkst ist vielleicht etwas hart, aber es wird ein sehr unschöner Rand drumrum gesetzt. Das Bild ist vom Safari, beim FF ist der Rand nur minimal schmäler.
Ich hab die Klasse einfach in den Input Tag reingesetzt, oder sollte dabei noch speziell was zugesetzt werden?

<input class="small magenta awesome" type="submit" name="submitButtonName">

 

[DeluXe]

Von hinten nach vorne, bzw. von links nach rechts: Firefox auf Mac, Safari auf Mac, Firefox auf Win, Safari auf Win. Ich kann komischen Ränder erkennen.

 

[Sprint]

Von hinten nach vorne, bzw. von links nach rechts: Firefox auf Mac, Safari auf Mac, Firefox auf Win, Safari auf Win. Ich kann komischen Ränder erkennen.

Anhang anzeigen 51251

Ich nehme mal an, du kannst keine komischen Ränder erkennen.
Aber wo kommen die dann bei mir her, bzw. wie hast du den Submit code-mäßig aufgebaut?

 

[Maik]

Moin,

gut möglich, dass das Ergebnis aus dem Rahmen des Submit- / Reset-Buttons resultiert.

mfg Maik

 

[Maik]

gut möglich, dass das Ergebnis aus dem Rahmen des Submit- / Reset-Buttons resultiert.

Bingooo

Lösung: Den Rahmen zuvor zurücksetzen:

input[type=submit], input[type=reset] { border:none; }

.awesome, .awesome:visited {
	background: #222 url(/images/alert-overlay.png) repeat-x; 
	display: inline-block; 
	padding: 5px 10px 6px; 
	color: #fff; 
	text-decoration: none;
	-moz-border-radius: 5px;   
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);  
	position: relative;
	cursor: pointer;
}

DeluXe hat dann wohl in seiner Testseite zusätzlich ein sog. "Reset-Stylesheet" genutzt, das u.a. den Rahmen jeglicher Elemente unterbindet.

mfg Maik

 

[Sprint]

Hi Maik,

vielen Dank für die einfache Lösung, und das auch noch ohne JS.

Schönen Sonntag noch,
Sprint

 

[Maik]

vielen Dank für die einfache Lösung, und das auch noch ohne JS.

So soll es sein, und immer wieder gerne

Dir auch einen erholsamen Sonntag

mfg Maik