12

I have a website design that includes text input fields that look like this:

Input Field http://img401.imageshack.us/img401/4453/picture1ts2.png

I'm wondering what the best solution for creating this input field is.

One idea I have is to always have a div around the input with a background image and all the borders disabled on the input field and specified width in pixels, such as:

<div class="borderedInput"><input type="text" /></div>

I have tried to discourage them from using this format, but they won't be discouraged, so it looks like I'm going to have to do it.

Is this best or is there another way?

--

Trial:

I tried the following:

<style type="text/css">
input.custom {
    background-color: #fff;
    background:url(/images/input-bkg-w173.gif) no-repeat;
    width:173px;
    height:28px;
    padding:8px 5px 4px 5px;
    border:none;
    font-size:10px;
}
</style>
<input type="text" class="custom" size="12" />

but in IE (6 & 7) it does the following when you type more than the width:

Over Length http://img240.imageshack.us/img240/1417/picture2kp8.png

4

7 に答える 7

10

私はこのようにします：

<style type="text/css">
div.custom {
    background:url(/images/input-bkg-w173.gif) no-repeat;
    padding:8px 5px 4px 5px;
}
div.custom input {
    background-color: #fff;
    border:none;
    font-size:10px;
}
</style>
<div class="custom"><input type="text" class="custom" size="12" /></div>

すべてが正しく収まるように、パディング値を調整するだけです。それ以外の場合は、入力フィールド全体を操作しているため、これは間違いなく最良のソリューションです。入力フィールド全体は、定義上、ユーザーがテキストを入力できるボックスです。

JavaScript に頼ることができる場合は、そのような div-Elements をプログラムで入力フィールドにラップできます。

編集: jQuery を使用すると、次のように実行できます。

$( 'input.custom' ).wrap( '<div class="custom"></div>' );

CSS:

div.custom {
    background:url(/images/input-bkg-w173.gif) no-repeat;
    padding:8px 5px 4px 5px;
}
input.custom {
    background-color: #fff;
    border:none;
    font-size:10px;
}

そしてあなたのHTML：

<input class="custom" ... />
于 2009-02-08T23:16:06.013 に答える
0

JavaScript を使用せずにオーバーフローを取り除く最も簡単な方法は次のとおりです。

  1. 3 つのスパンを作成し、それらの高さをイメージの高さに設定します。
  2. 左右の丸い部分がそれぞれ1枚目と3枚目にくるように、画像を3分割します。
  3. 1スパン目の背景を左フチの画像に設定し、リピートなしに設定します。
  4. 3 番目のスパンの背景を右の境界線のある画像に設定し、繰り返しなしに設定します。
  5. 高さをスパンの高さに設定し、背景を 2 番目の画像に設定することを忘れずに、入力を中央のスパン内に配置し、x のみを繰り返します。
  6. これにより、入力が満たされると、入力が水平方向に拡大するように見えます。重複はなく、JS も必要ありません。

HTML 画像の高さを 60px とすると、1 番目と 3 番目のスパンの幅は 30px で、

<span id="first">nbsp;</span><br />
<span id="second"><input type="text" /></span><br />
<span id="third">nbsp;</span>

CSS

span#first{background:url('firstimage') no-repeat; height:60px; width:30px;}
span#third{background:url('thirdimage') no-repeat; height:60px; width:30px;}
span#second input{background:url('second image') repeat-x; height:60px;}

これで問題が解決するはずです。

于 2011-12-23T19:26:49.457 に答える
0

私の知る限り、バックグラウンド スクロールの問題は、Firefox やその友人、または Internet Exploder で解決できます。しかし、一度に全員を幸せにするわけではありません。

私は通常、入力を直接スタイルすると言っていましたが、div の例はそれほど悪く聞こえず、背景画像のスクロールの問題を処理する必要があると考えています。

その場合、div を position:relative として設定し、入力を適切なパディングと幅 (またはパディングが 0 の場合は 100% 幅) で内部に配置し、背景を透明にし、div に画像を配置します。

于 2009-02-13T00:02:22.240 に答える