2

ボタンのスタイリングを div に追加しました。背景色は通常の状態には適用されません。ただし、ボタンをクリックしてアクティブな状態にするとすぐに、背景色が正しく適用されます。背景色が 1 つの段階でのみ表示され、他の段階では表示されない理由がわかりません。私はそれを機能させるために !important を使用することに頼りました。以下は CSS です。

.statusbutton {
    -moz-box-shadow:inset 0 1px 0 0 #ffffff;
    -webkit-box-shadow:inset 0 1px 0 0 #ffffff;
    box-shadow:inset 0 1px 0 0 #ffffff;
    height:43px;
    width:40px;
    border:1px solid #ccc;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    display:inline-block;
    background-color:#fbfbfb !important;
}


.statusbutton:active {
    position:relative;
    background-color:#fbfbfb;
    top:1px;
}

編集:問題はスタイルシートの後半にあることに気付きました:

.red {
background:url(status-red.png) no-repeat center center;
}

その後、ボタンに .red を適用したため、背景画像が背景色を上書きしました。以下のコードは問題を修正しました：

.red {
background:url(status-red.png) no-repeat center center;
background-color:#fbfbfb;
}
4

2 に答える 2

1

!important を使用することは、通常はお勧めできません。これはあなたのcssファイル全体ですか、それとももっとありますか? ここで背景色を設定しようとする試みをオーバーライドしている、優先度の高い別の css スタイルがある可能性があります。それでも問題が解決しない場合は、jsfiddle をセットアップすることをお勧めします

于 2013-01-18T01:39:36.347 に答える
0

このコードを機能させたい場合は!important、CSS コードから を削除する必要があります。そうしないと、このルールが状態で優先され、:active両方の状態で色を変更することを忘れないでください (実際には#fbfbfb、通常状態とアクティブ状態の両方で使用します)。

于 2013-01-18T01:39:37.520 に答える