- ベストアンサー
CSSテキストフィールドの文字入力位置をカスタマイズする方法
- テキストフィールドの文字を上に表示させるためのCSSプロパティを調整しても、Safariでの表示が思った通りにならない問題について、解決策を教えてください。
- CSSでテキストフィールドの文字入力位置をカスタマイズする方法を紹介しています。画像を背景に使用している場合、Safariでの表示が正しくならない問題が発生することがあります。
- テキストフィールドの文字入力位置をカスタマイズしたいが、Safariでの表示が思った通りにならない問題が発生しています。CSSプロパティの調整など、解決策を教えてください。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
なるほどね。 ＞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{}とか、書いてらっしゃる。メンテナンスが、すごく難しい。詳細度というとてもよい手段が用意されているので、それを使えば、もっとスリムに指定できそう。 .
その他の回答 (4)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞（IEだと改行を入れないと一列に並んでしまったため、改行を入れています。） span{}に、display:block;text-align:center;を追加でよいと思いますが？ 差し出がましいですが、私は、 ・HTMLのマークアップが適切なら、デザインのためだけのidやclassは、一切使わないですむ。 例)div div.(class) ul{} div ul{} で区別する。 ・詳細度と継承をきちんと利用すると、プロパティの指定は１回ですむ。 例)font-style:などをあちこちで書かない。 ・配置や枠組みのスタイルシートと、色指定のスタイルシートは別シートにする これって、デザイン変更にとっても便利・・代替スタイルシートを利用できる環境向けにフォントサイズや配置の異なるシートを用意すればよい。 スタイルシートを小さくすることで、ページ読み込みだけでなくメンテナンスが容易になる。後日のメンテナンスって大事ですから。 がんばってください。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞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ドットコム」を直接入力していただければ実物をご覧頂けます。最初にでてくる年齢バリデーションのフォームがそれです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
書き漏らしたので 基本は、きちんとHTMLが書けている事 (div内に何でも入れられるが、やはり段落要素は明記すべき) とかけていることと。 CSSはセオリーどおりに記述すること、ブロック要素なら配置を決める。内部で絶対配置をしたければ、親ブロックにはstatic(デフォルト)以外を設定することなど 詳細度によって、div.Text内のpにはクラスやIDは不要--子孫セレクタ--詳細度は(12)。(念のため)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
画像サイズや、挿入したい文字列の情報がないため、あくまで推測でしか提示しない。 なお、画像サイズ、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"> <!-- div.Text { position:relative; /* これでこのブロック内でabsoluteが使える */ margin-left:auto; /* とりあえずセンターに配置してみる */ margin-right:auto; background: url(images/form_text.png) no-repeat 50% 50% rgb(0,60,60); width:91px; border: none; height:74px; margin-bottom:15px; padding:0px; } div.Text p{ /* .Text内のpのみに適用 */ font-weight: bold; color: rgb(255,255,0); margin: 0px; padding:0px; position:absolute; top: 52px; /* 1951の文字の下線あたり */ width:100%; text-align:center; } --> </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とあるのはユーザーが入力する文字で、デフォルトでは空になっています。
お礼
> MMとかYYについては、文字のほうがよいかと、そうすると画像は一種類で済む。ずらせば縦の色(FSTD)の部分は隠せる。 ご指摘のとおり、MM, DD, YYYYを文字に差し替え、画像もひとつにしてみました。 HTMLは<span><input type="text"><br />MM</span>とし、（IEだと改行を入れないと一列に並んでしまったため、改行を入れています。）CSSをいじってみるとうまく表示されました！ありがとうございました！できることならお会いして御礼を言いたいくらいです！！！！ それと、idを使っている箇所にはjavascriptを使っています。getElementByIdで。。今思えばクラスでもいいですね; 本当にありがとうございました！