< select>の高さを設定するFirefox 2で
-
06-07-2019 - |
質問
Firefox 2のHTML選択ボックスの高さに奇妙な問題があります。コードを次に示します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>FIREFOX 2 SELECT BOX HEIGHT ISSUE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body { margin: 0; padding:0 ;}
div { height: 20px; background:red; float: left; overflow: hidden; }
select { height: 20px; width: 100px; }
</style>
</head>
<body>
<div>Should be same height as </div>
<select><option>this</option></select>
</body>
</html>
高さは2ピクセル大きくなっています-パディング、フォントサイズ、行の高さは影響を与えないようで、アイデアや見たい場所を使い果たしました。 FF2の選択ボックスの実際の高さは、常にcss height + 2であると仮定する必要がありますか?修正したり回避したりできますか?
解決
フォームコントロールスタイリングの素晴らしい世界へようこそ。
敗北主義者のように思わずに、あきらめるべきだと思います。フォームコントロールのスタイルに関係なく、常にスタイルを完全に無視するブラウザが存在します。 SafariはほとんどのCSSを無視すると信じています。 456 Berea Streetの「選択要素のスタイリング」を参照してください。
Javascriptを使用する代替手段があります- jQuery UI には、select要素に似たウィジェットがいくつかあると思います。この jQueryクリックメニューを使用して、次の値を設定する関数を添付することもできます。非表示の入力フィールド。私はこれを以前にやったことがあり、うまく機能します。これらの種類は、サイズと外観を完全に制御できる唯一の方法です。
他のヒント
一部のブラウザのデフォルトが動作している場合があります。 CSSをリセットしてから適用するidあなたのスタイル?まだ2pxオフですか?
CSSを使用してスタイルを設定してください。 jquery / javascriptを採用します。
独自の画像を作成し、それらの画像のクリックイベントを使用して、実際のフォーム入力を切り替えます。これらのフォーム入力は、コンテナスタイルのdisplay:noneにある必要があります。このように、あなたが望むようにそれを設計することができます。
このトピックに関する優れた記事を次に示します。 http://www.noupe。 com / css / form-elements-40-cssjs-styling-and-functionality-techniques.html