[GELÖST] FormBuilder: Submit-Button-Wert stylen

COR9 · 17. November 2016 11:57

Ich möchte gern den Submit-Button meines Kontaktformulars entwurfsgemäß gestalten. Bedeutet: Das S muss eine andere Schriftfarbe erhalten und in einem Kreis stehen. Reines CSS mit first-letter hilft mir leider nicht weiter, vielmehr muss interpretierter Wert des Buttons folgender sein:

Hier klicken, um den Code zum Kopieren zu markieren

[== HTML ==]
<span>S</span>ENDEN

Wie bekomme ich das Eingabefeld »Text für den „Absenden“-Knopf« im Reiter »Formular-Versand« dazu, den Span zu interpretieren und das Ganze dann als gültigen Wert ins input einzusetzen?

CSS für den Span sieht so aus und funktioniert bei normalem Text (Überschriften) wunderbar:

Hier klicken, um den Code zum Kopieren zu markieren

[== CSS ==]
input[type="button"] span, input[type="reset"] span, input[type="submit"] span {
		display: inline-block;
		color:#fff;
		background-color: #ED9A00;
		font-size:1.4em;
		line-height: 1.4em;
		margin-right: 0.1em;
		margin-bottom: 0.3em;
		vertical-align: middle;
		text-align: center;
		width: 1.4em;
		height: 1.4em;
		-moz-border-radius: 0.7em; 
		-webkit-border-radius: 0.7em; 
		border-radius: 0.7em
		}

NaN · 17. November 2016 12:34

Geht nicht. Du kannst kein HTML in Attributen verwenden und gleichzeitig als HTML anzeigen lassen. Entweder es ist HTML oder es ist der Wert eines Attributes.
Ich weiß nicht wieviel Einfluss Du auf die Gestaltung des Formulartemplates bzw. die Elemente des Formulars hast. Anstelle von <input type="submit" value="Senden"/> würde ich an dieser Stelle <button type="submit" value="submit"><span>S</span>enden</button> verwenden.

Andynium · 17. November 2016 15:15

So spontan hätte ich an einen grafischen SVG-Button gedacht.

Lässt sich auch prima stylen...

COR9 · 17. November 2016 19:36

NaN schrieb:

... würde ich an dieser Stelle <button type="submit" value="submit"><span>S</span>enden</button> verwenden.

*ans Hirn fass* roll Das isses, mehr brauch ich nicht. Danke. Den Wald mal wieder vor lauter Bäumen nicht gesehen. Habe vollen Zugriff.

@cyberman Habe diesen Style in diversen Überschriften schon verwendet. Sieht zwar schon im Entwurf nicht ganz so doll aus, Stichwort Kerning. Ist aber barrierearm ohne Aufwand. Und die Kundin ist begeistert, weil ihr endlich einer ihre Website ganz nah am Entwurf baut.

Andynium · 17. November 2016 21:59

COR9 schrieb:

die Kundin ist begeistert, weil ihr endlich einer ihre Website ganz nah am Entwurf baut.

Ist doch glatt ein Extra-Bonus für CMSMS wink ...

Forum für CMS/made simple

#1 17. November 2016 11:57

[GELÖST] FormBuilder: Submit-Button-Wert stylen

#2 17. November 2016 12:34

Re: [GELÖST] FormBuilder: Submit-Button-Wert stylen

#3 17. November 2016 15:15

Re: [GELÖST] FormBuilder: Submit-Button-Wert stylen

#4 17. November 2016 19:36

Re: [GELÖST] FormBuilder: Submit-Button-Wert stylen

#5 17. November 2016 21:59

Re: [GELÖST] FormBuilder: Submit-Button-Wert stylen

Fußzeile des Forums