einzelnen weiter button mit CSS verändern

Question

Moin zusammen,

ich würde gerne einen einzelnen weiter- Button anpassen. Da alle weiter- Buttons aber die gleiche ID und die gleiche Class haben, weiß ich nicht, wie ich einen einzelnen Button mit CSS ansteuern kann.
Wenn es möglich ist würde ich das gerne im html Feld des Fragebogens machen, also nicht im Layout.

Gibt es dafür eine Möglichkeit?

<input class="button" name="submitNext" id="submit0" type="submit" value="Daten abschicken" title="Daten abschicken" tabindex="200">

Das ist der Code des Buttons den ich verändern möchte- allerdings haben alle anderen Buttons (wie oben geschrieben) die selbe ID und die selbe Class.

Danke für eure Hilfe

Grüße

Answer 1

Da alle weiter- Buttons aber die gleiche ID und die gleiche Class haben ...

Ich hoffe, Sie meinen Knöpfe auf unterschiedlichen Seiten? Auf einer Seite sollte jeder Knopf (wenn man mehrere davon hat) seine eigene ID bekommen.

Wenn es möglich ist würde ich das gerne im html Feld des Fragebogens machen, also nicht im Layout.

Verwenden Sie dafür bitte die PHP-Funktion pageCSS()

pageCSS('
  input#submit0 {
    border: 4px dotted red;
  }
');

Comments

Ja, ich meinte auf unterschiedlichen Seiten :)
Danke für ihre Hilfe- ich habe noch eine andere "reine CSS Lösung gefunden:

[title~=abschicken] {
background:    #0b5394;
background:    linear-gradient(#55acee, #0b5394 50%, #55acee);
border:        1px solid #0b5394;
border-radius: 1000px;
padding:       7px 30px;
color:         #ffffff;
display:       inline-block;
font:          normal bold 18px/1 "Komika", cursive;
text-align:    center;
text-shadow:   2px 2px #0b5394;
}

Also eine eindeutige Zuordnung über Attributname (title) und Attributwert (abschicken). Das ~ Zeichen sagt aus, dass nur der Button mit dem Titel gestaltet werden soll, der das Wort "abschicken" in seinem Titel hat.

---

Kann man machen ... aber das andere ist nicht mehr oder weniger "reines" CSS. Der pageCSS()-Befehl sorgt einfach nur dafür, dass das CSS nur auf einer einzelnen Seite eingebunden wird. Man benötigt es ja nicht auf jeder Seite.

Eine weitere Lösung wäre, dass man zwei Layouts erstellt und auf der betroffenen Seite mittels option('layout', ...) das "andere" Layout verwendet.