webentwicklung-frage-antwort-db.com.de

Ändern der Hintergrundfarbe des HTML-Schaltflächentags mit CSS?

Ich verwende das HTML-Schaltflächen-Tag für meine Übermittlungsschaltflächen sowie Schaltflächen, die auf andere Seiten und Funktionen verweisen. Ich möchte Schaltflächen mit unterschiedlichen Hintergründen (eine blaue, eine graue, eine rote, eine grüne usw.) haben, aber Ich kann nicht scheinen, es zum Laufen zu bringen, indem ich einfach eine Klasse zum Button-Tag hinzufüge.

Folgendes habe ich bisherHTML

<button class="green_btn" type="submit" name="cnp">News Control</button>

CSS

button {
    margin: 0 auto 5px auto;
    display: block;
    width: 134px;
    height: 35px;
    background: url('../images/darkgrey_btn_bg.png') no-repeat left;
    border: 0 none;
    font-weight: bold;
    text-align: center;
    color: #fff;
    cursor: pointer;
}
.grey_btn button {
    background: url('../images/darkgrey_btn_bg.png') no-repeat left;
}
.green_btn button  {
    background: url('../images/green_btn_bg.png') no-repeat left;
}
.ltblue_btn button {
    background: url('../images/ltblue_btn_bg.png') no-repeat left;
}
.blue_btn button {
    background: url('../images/blue_btn_bg.png') no-repeat left;
}
.red_btn button {
    background: url('../images/red_btn_bg.png') no-repeat left;
}

standardmäßig soll die Schaltfläche garkgrey_btn_bg.png als Hintergrund sein, aber wenn ich green_btn_bg.png als Hintergrund verwenden möchte, führt das Hinzufügen von class = "green_btn" zum HTML-Code nichts aus.

Hat jemand irgendwelche Ideen?

4
Meta

Sie zielen mit .class-name button auf Ihre Klasse falsch ab. Das sucht eigentlich nach einem Element mit einem Kinderknopf.

Bitte schön...

button.grey_btn {
    background: url('../images/darkgrey_btn_bg.png') no-repeat left;
}
button.green_btn  {
    background: url('../images/green_btn_bg.png') no-repeat left;
}
button.ltblue_btn {
    background: url('../images/ltblue_btn_bg.png') no-repeat left;
}
button.blue_btn {
    background: url('../images/blue_btn_bg.png') no-repeat left;
}
button.red_btn {
    background: url('../images/red_btn_bg.png') no-repeat left;
}
3
Seth

Für alle, die hier landen, die wie ich nicht sicher waren, wie sie die Hintergrundfarbe einer Schaltfläche ändern können ...

Stattdessen in Ihrer CSS-Datei:

#footer_join_button {
  background-color: $light_green; 
}

... oder auch:

#footer_join_button {
  color: $light_green; 
}

... das richtige Attribut/die richtige Eigenschaft für das Ziel ist einfach background:

#footer_join_button {
  background: $light_green; 
}

Hinweis: Ich verwende SASS precompiler, daher die oben möglicherweise merkwürdig aussehende $light_green-Variable.

1
mecampbellsoup

Ihre Klassen suchen nach einem Button inside einem Element mit einer Farbklasse. Zum Beispiel:

.red_btn button

... sucht innerhalb eines übergeordneten Elements nach einer Schaltfläche mit der Klasse red_btn. Es sollte in der Tat sein:

button.red_btn

... obwohl der button-Teil des Selektors wahrscheinlich redundant ist, es sei denn, Sie haben andere Elemente unterschiedlichen Typs mit denselben Klassennamen.

1
Utkanos