CSS テキストフィールドの文字入力位置

解決済

質問者：ageha_lie
質問日時：2009/12/21 09:26
回答数：5件

フォーム内テキストフィールドの文字入力位置について質問です。
テキストフィールドに背景画像を使っているのですが、文字を入力する時の文字位置をカスタマイズしたいのです。添付している画像の半透明な四角とYYYYの文字までが画像です。現在フィールドの真ん中に表示されている入力文字を上に（２０ｐｘくらい）表示させたいです。

Firefox, IEでは完璧な位置で表示されるのですが、なぜかSafariだけ画像のような位置に表示されてしまいます。Sarafiのみのハックを使っていろいろ試しているのですが、なかなか思った通りに表示されません。

使っているCSS:
.text {
background: url(images/form_text.png) no-repeat 0 0;
width:74px;
border:0 none;
height:91px;
margin-bottom:15px;
padding:3px 0 0 10px;
}

下記の値を調節してみました：
line-height
padding
vertical-align
height
が、全て変化ありませんでした。

なにか案がありましたら教えてください。

※添付画像が削除されました。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： ORUKA1951
回答日時：2009/12/22 00:37

なるほどね。

＞padding-left:10px; を入れてるので
　ソースを見て、firebugを使って色々代えてみたのですが、Safari独特のpadding/margin設定を無視する部分は、この方法では駄目ですね。
　逆にSafariに合わせてのほうがよいかもしれません。
　海外の情報も検索してみたのですが、はっきり言って無理と言う結論です。そもそもSafariでも、この部分はバージョン(1,2と3)によってずいぶん違うみたいです。
　<span><input type="text"></span>で囲んでspanを指定したほうがよさそうです。

＞widthは画像によって変わります。
　MMとかYYについては、文字のほうがよいかと、そうすると画像は一種類で済む。ずらせば縦の色(FSTD)の部分は隠せる。
　そうすると、配置もうまく設定できそう。
<span><input type="text">MM</span>
として、
div#restriction{
　position:relative;
}
div#restriction span{
　float:left;
　width:****;
}

　やたらとidが多いようですが、デザインのためですか？
#restriction input{}
ですむところを
#month, #day, #year{}とか、書いてらっしゃる。メンテナンスが、すごく難しい。詳細度というとてもよい手段が用意されているので、それを使えば、もっとスリムに指定できそう。
　.

- 0
- 件

通報する

この回答へのお礼

> MMとかYYについては、文字のほうがよいかと、そうすると画像は一種類で済む。ずらせば縦の色(FSTD)の部分は隠せる。

ご指摘のとおり、MM, DD, YYYYを文字に差し替え、画像もひとつにしてみました。
HTMLは<span><input type="text"><br />MM</span>とし、（IEだと改行を入れないと一列に並んでしまったため、改行を入れています。）CSSをいじってみるとうまく表示されました！ありがとうございました！できることならお会いして御礼を言いたいくらいです！！！！

それと、idを使っている箇所にはjavascriptを使っています。getElementByIdで。。今思えばクラスでもいいですね;

本当にありがとうございました！

通報する

お礼日時：2009/12/22 04:59

No.5

回答者： ORUKA1951
回答日時：2009/12/22 08:20

＞（IEだと改行を入れないと一列に並んでしまったため、改行を入れています。

）
　span{}に、display:block;text-align:center;を追加でよいと思いますが？

　差し出がましいですが、私は、
・HTMLのマークアップが適切なら、デザインのためだけのidやclassは、一切使わないですむ。
　例)div div.(class) ul{}
　　 div ul{} 　　　　　　　で区別する。

・詳細度と継承をきちんと利用すると、プロパティの指定は１回ですむ。
　例)font-style:などをあちこちで書かない。

・配置や枠組みのスタイルシートと、色指定のスタイルシートは別シートにする
　これって、デザイン変更にとっても便利・・代替スタイルシートを利用できる環境向けにフォントサイズや配置の異なるシートを用意すればよい。

　スタイルシートを小さくすることで、ページ読み込みだけでなくメンテナンスが容易になる。後日のメンテナンスって大事ですから。

　がんばってください。

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2009/12/21 11:19

＞width:130px; height:91px;

＞が正しかったです。

＞このテキストはフォーム内のテキストフィールドなので、HTMLは
＞<form>
＞<input class="text" type="text" />
＞<input type="submit" value="Submit" />
＞</form>

　それじゃ対処の方法はまるで違う。<form>の中の、テキスト入力コントロール<input type="text">ですね。
Q: 単純にform内には、二つのコントロールしかないのか？
Q: 背景画像の実サイズは？
Q: text入力コントロールのサイズは？
Q: それぞれのフィールドは、どのようにデザインするのか？
　

この回答への補足

Q: 単純にform内には、二つのコントロールしかないのか？
全てを書くと
<form>
<input id="month" name="month" type="text" maxlength=2 />
<input id="day" name="day" type="text" maxlength=2 />
<input id="year" name="year" type="text" maxlength=4 />

<br />
<select id="province" name="province">
<option value="BC">British Columbia</option>
<option value="AB" >Alberta</option>

</select>
<input class="enter" width="119px" type="image" height="34px" src="images/btn_enter.png" />
</form>

Q: 背景画像の実サイズは？
width: 140px, height: 91pxです。
padding-left:10px; を入れてるのでCSSでは10pxほど引いてwidth:130pxとしています。

Q: text入力コントロールのサイズは？
？文字サイズのことでしょうか？？

Q: それぞれのフィールドは、どのようにデザインするのか？
各フィールドのidによって違う背景があり、widthは画像によって変わります。（heightは共通です。）

ワケあってURLは載せられないので「okspringドットコム」を直接入力していただければ実物をご覧頂けます。最初にでてくる年齢バリデーションのフォームがそれです。

補足日時：2009/12/21 15:01

通報する

- 0
- 件

通報する

No.2

回答者： ORUKA1951
回答日時：2009/12/21 10:44

書き漏らしたので

基本は、きちんとHTMLが書けている事
(div内に何でも入れられるが、やはり段落要素は明記すべき)
とかけていることと。

　CSSはセオリーどおりに記述すること、ブロック要素なら配置を決める。内部で絶対配置をしたければ、親ブロックにはstatic(デフォルト)以外を設定することなど

　詳細度によって、div.Text内のpにはクラスやIDは不要--子孫セレクタ--詳細度は(12)。(念のため)

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2009/12/21 10:35

画像サイズや、挿入したい文字列の情報がないため、あくまで推測でしか提示しない。

なお、画像サイズ、W91 H74 として(提示のCSSは逆？)

下記サンプルては、読みやすいためにタブを全角スペースに変換してあるので、テストするときは戻すこと。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
　　<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
　　<title>Untitled</title>
　　<meta http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
　　
</style>
</head>
<body>
　　<h1>title</h1>
　　<h2>subTitle</h2>
　　<div class="abstract">
　　　　<p>
　　　　</p>
　　</div>
　　<div class="Text">
　　　　<p>YYYY</p>
　　</div>
</body>
</html>

この回答への補足

情報が少なくて申し訳ありませんでした。そして
width:130px; height:91px;
が正しかったです。

このテキストはフォーム内のテキストフィールドなので、HTMLは
<form>
<input class="text" type="text" />
<input type="submit" value="Submit" />
</form>
となっています。
画像の1967とあるのはユーザーが入力する文字で、デフォルトでは空になっています。

補足日時：2009/12/21 10:51

通報する