4

できるだけ基本的な HTML を使用して、いくつかのスタイリッシュなボタンを作成することに取り組んでいます。

<input type="submit" value="Submit!" />

ただ、「押さえた」状態をスタイリングするのは難しい。オンラインでどこを見ても、デザイナーはアンカーを使用してこの問題を回避し、CSS の:active疑似クラスを利用しているようです。残念ながら、ボタンにはこれがないようです。がありますが:focus、実際には同じようには機能しません。

だから私の質問はこれです:このHTMLを変更せずに「ダウン」状態をスタイルすることは可能ですか? 必要に応じて jQuery を使用しても構わないと思っていますが、アンカーを含まない純粋な CSS ソリューションがあることを主に望んでいます。皆さんは何をお勧めしますか？

ありがとう！

4

4 に答える 4

2

:active実際には、疑似クラスをフォーム ボタンに適用できます。

次に例を示します。

http://jsfiddle.net/xvWG5/

お役に立てれば！

于 2012-08-11T02:12:00.043 に答える
1 
input:active {
    background-color: red;
}

これは、Firefox、Chrome、IE9で機能します

于 2012-08-11T02:03:06.517 に答える
0

どんなスタイリングを目指していますか？Safari6 と FF12 で押すと、このフィドルの要素のフォントの色が赤に変わるのがわかります。

W3 は、動的疑似クラスのサポートと特定のプロパティの処理において、ブラウザ間で矛盾が生じる可能性があることを示唆しています。問題が発生しているサンプル コードを提供する必要があります。

于 2012-08-11T02:11:59.170 に答える
0

タグを使用するオプションはありますか? 無限に柔軟であることがわかると思います。たとえば、:active 状態は Safari、Chrome、および Firefox で機能しているように見えます (現時点では IE にアクセスできません)。

button {
    background-color: red;
    color: white;
    font-weight: bold;
    font-size: 3em;
    border: 0;
}

button:active {
    background-color: blue;
}
​
于 2012-08-11T02:12:48.410 に答える