）をタイプセットし、任意のサイズを与える必要があると思います。 しかし、この要素をゴムにし、条件を満たす方法： 1. テキストの水平および垂直インデントを設定する機能。 2. 要素は...">
Clever Geek Handbook

ラバーテキストボックスの調整

多くのタイプセッター（だけでなく）がテキストフィールド（<input type = "text" />）をタイプセットし、任意のサイズを与える必要があると思います。 しかし、この要素をゴムにし、条件を満たす方法：

  1. テキストの水平および垂直インデントを設定する機能。
  2. 要素は、配置されるコンテナ全体を占有する必要があります。
  3. テキストフィールドの任意の場所でマウスをクリックすると、カーソルが設定されます。


答えは非常に簡単で、次の方法で解決されます。





開始するには、入力要素の幅を100％に設定し、テキストの左右にインデントを追加するときに入力要素に何が起こるかを理解する必要があります。

CSS規格（およびこの場合はすべてのブラウザーがそれらをサポートします）によると、ボーダー（ border ）および くぼみ フィールド（ margin ）は以下と等しくなります：



width = width + padding-left + padding-right



つまり 内部の水平方向の余白の分だけ大きくなり、結果の要素は割り当てられた領域を超えて突出します。

合計幅が100％になるように、2つのコンテナのシステムを使用できます。 



		 <div class = "input-width">
			 <div class = "width-setter">
				 <入力タイプ= "テキスト"値= "" />
			 <div>
		 </ div>


各コンテナはその役割を実行します。

  1. input-width-このコンテナは、テキストフィールドの結果の幅を設定します。
  2. width-setter-このコンテナは、入力要素の幅から内側の水平インデントを引いた幅を設定します。


この設計を明確にする一連のスタイルを次に示します。 



	 .input-width {
		高さ：23px;
		 border：1px solid＃999;
		背景：#fff;
	 }
	 .width-setter {
		高さ：23px;
		マージン：0 9px;
	 }
	 .width-setter入力{
		幅：100％;
		高さ：14px;
		パディング：4px 9px 5px;
		マージン：0;
		フォントファミリー：タホマ、ジュネーブ、サンセリフ;
		フォントサイズ：12px;
		行の高さ：14px;
		色：＃000;
		 border：0なし;
		背景：＃9C6;
	 }


例1



スタイルから、 input-width要素はテキストフィールドが占める幅を設定することがわかります。 width-setter要素は、入力要素の幅を水平インデントより小さく設定します。 彼のことは注目に値する くぼみ マージンは、入力要素のpadding-leftおよびpadding-rightと等しくなければなりません。

この説明では、入力要素は横パディングのサイズだけwidth-setterから突出し、IE6ではすべての「親」を独自のサイズに拡張します（ 例1 ）。 また、IE6-7ブラウザーでは、入力要素にインデントがありますが、 マージンプロパティをゼロに設定しても削除できません。 この配置を変更するには、テキストフィールドを左、左インデントのサイズ（ padding-left ）にシフトする必要があります。 これはposition：relativeを介して行うことができますが、IE6では、 幅設定コンテナはテキストフィールドの幅に合わせて引き伸ばされたままになります。 ストレッチをなくすには、たとえばposition：absoluteを設定して、要素が親のサイズに影響を与えないようにする必要があります。

コンテナの初期セットを新しい方法で説明しましょう。 



	 .input-width {
		高さ：23px;
		 border：1px solid＃999;
		背景：#fff;
	 }
	 .width-setter {
		高さ：23px;
		マージン：0 9px;
		位置：相対;
	 }
	 .width-setter入力{
		幅：100％;
		高さ：14px;
		パディング：4px 9px 5px;
		マージン：0;
		フォントファミリー：タホマ、ジュネーブ、サンセリフ;
		フォントサイズ：12px;
		行の高さ：14px;
		色：＃000;
		 border：0なし;
		背景：＃9C6;
		位置：絶対;
		左：-9px;
		 top：0;
	 }


例2



その結果、このようなスタイルを適用すると、最初に設定されたタスクが実行されます。 テキストフィールドは指定されたインデントラバーで表示され、任意の場所でクリック可能になりました。

結果の要素に特定の幅を設定するには、 input-widthコンテナのwidthプロパティを設定するだけです。



ご注意 ラバーテキストフィールドを実装する上記の方法は、Doctype：HTML 4.01、XHTML 1.0、およびHTML（HTML 5）でテストされており、ブラウザ間の互換性があります：IE6-8、Opera 9 +、FF 2.0 +、Safary 2.0 +、Chrome。 Doctypeがない場合、ブラウザ間のメソッドのパフォーマンスは保証されません。


More articles:


All Articles