HTML/CSS を介して通常の (有効に見える) ボタンをレンダリングするにはどうすればよいですか?
(つまり、マウスをその上に置いたり「押したり」したときに、「強調表示」または「プッシュ」されたくありません。)
ボタンの画像を使用できることはわかっていますが、ブラウザーの異なるバージョンまたは将来のバージョンでは、後続の実際のボタンが異なって表示され、画像と一致しない可能性があります。そのため、HTML/CSS を介してレンダリングしようとしています。
たぶん<div>
、指定された幅と高さの空をボタンに重ねて配置することを検討できますか?これにより、ボタンのクリックが妨げられますか?
外側の要素の配置モードに応じて、 を使用し<div>
て一部の外側の要素を覆うことも、<input type="button" ...>
それ自体だけを覆うこともできます (この場合、JavaScript と DOM は、ボタンの実際のサイズとカバレッジ領域を決定するのに役立ちます)。
disabled 属性はすべての主要なブラウザーでサポートされているため、それを使用できます。
<button type="button" disabled>Click Me!</button>
または、代わりに:
<input type="button" value="Click Me!" disabled />
有効に見えるようにするには、CSS プロパティを編集して無効状態にすることができます。
input[type="button"]:disabled, button[type="button"]:disabled {
background:#DDD;
color:#000;
}
しかし、OPが指摘したように、これにより、特定のブラウザ/システムで他のボタンがどのように見えるかが完全に異なるように見える可能性があります. CSS ルールで background プロパティを省略すると、他の無効なボタンとしてレンダリングされますが、フォントの色は有効なボタンのようになります。または、disabled HTML 属性を省略し、これらのボタンを通常は属するコンテキスト (フォームの一部) から外して配置します。
編集:期待どおりに表示するには、どのスタイルを適用する必要があるかについてのより良い説明については、Antony's answerを参照してください;)
@Navigeteur
通常のボタンのスクリーンショットを撮り、bmpまたはpng画像として保存し、ボタンの代わりに画像をレンダリングするだけです:)
CSS を使用して、無効なボタンを通常のボタンのように見せることができます。
デモ
IE はその CSS をレジストリに埋め込んでいました。ただし、原則として、適用color: #000;
およびその他の変更により、通常のボタンのように見えます。
HTML
<input type="submit" disabled="disabled" value="I cannot be pressed." />
CSS
/* Safari */
input[type="submit"]:disabled {
-webkit-appearance: push-button;
-webkit-box-align: center;
text-align: center;
cursor: default;
color: ButtonText;
padding: 2px 6px 3px 6px;
border: 2px outset ButtonFace;
background-color: ButtonFace;
box-sizing: border-box;
white-space: pre;
}
/* Firefox */
input[type="submit"]:disabled {
-moz-appearance: button;
padding: 0px 6px 0px 6px;
border: 2px outset ButtonFace;
background-color: ButtonFace;
color: ButtonText;
font: -moz-button;
line-height: normal;
white-space: pre;
cursor: default;
-moz-box-sizing: border-box;
-moz-user-select: none;
-moz-binding: none;
text-align: center;
text-shadow: none;
}