CSS: Hintergrundfarbe für Button definieren

  • Ich habe ein Formular einer Extension vorliegen, in dem ich einen Button mit einer anderen Hintergrundfarbe gestalten will. Im HTML finde ich folgenden Code:

    Code
     <input class="btn btn" type="button" name=.......

    Die Klasse ".btn" und ".btn.btn" wird auch ohne "input" benutzt. In diesem Fall (also ohne "input") soll keine andere Farbe benutzt werden.


    Wie muss die dazu erforderliche CSS-Definition lauten?

  • Danke für den Tipp. Ich hab's genau durchgelesen, aber die Antwort auf meine Frage habe ich nicht finden können:

    Es gibt nur Klassen wie ".btn btn-primary" aber nie ein ".btn.btn".

    Kann ja auch sein, dass der Programmierer der Extension Mist gebaut hat, weil es doch keinen Sinn macht, die gleiche Klasse zwei Mal hintereinander im HTML zu setzen.


    Und ich fragte auch danach, ob man eine CSS-Definition so erstellen kann, dass sie nur für buttons gilt, bei denen "input" davor steht.


    Den von mir erwähnten HTML-Code fand ich mit dem Inspector des Browsers:

    Code
    <input class="btn btn" type="button" name=.......
  • Wie wärs denn z.B. mit


    Code
    input.btn.btn {
    
    }

    Die Spezifität dieses Selektors genügt aber möglicherweise nicht um eine Änderung der Hintergrundfarbe zu ermöglichen, daher ist der Link zum Problem, wie meistens, sinnvoll.

  • Leider kann ich die betreffende Webseite zurzeit noch nicht öffentlich machen bzw. die URL hier einstellen.


    Ich habe es aber versucht mit

    CSS
    input.btn.btn {
    background-color: #5bb75b !important;
    }

    ...und es geht nicht.

    Ich hatte als background-color eine grüne Farbe zum Test eingetragen. Mit dem Code oben, jedoch einem Punkt vor "input" wird die grüne Farbe nur beim Hovern angezeigt und sie bedeckt dann auch nur das untere Drittel des Button. Trotz Zusatz "!important" ist wohl die Schattierung des Buttons dank anderer Definitionen im Bootstrap vorrangig.