inputタグのテキストBOXだけ右寄せにする方法

inputタグのボタンやテキストBOXが混在しているページがあります。
この中のテキストBOXだけ右寄せにしたいと思っています。

原始的なJavaSctiptは使わずに、かつID指定・class指定なしに。
シンプルにきれいに、が希望です。1つ1つ指定というのはしたくないです。

昔はJavaScriptでinputタグのものを全部持ってきて
全ループさせながらtypeを判定しテキストBOXのものだけを
どうこうするとか書きましたが、原始的なので書きたくありません。
というかもう少しスマートな書き方はないものかと思い
質問をすることにしました。


スタイルシートだけで書ければいいなと思いますがこれを知りません。
input:text {…}
みたいな書き方があればいいなと思っています。

これがダメな場合でもprototypeやjquery等のライブラリを使用し
シンプルなJavaScriptの記述で実現できればそれを知りたいです。


・原始的なJavaScriptは使わない
・id・class指定のスタイルシートは使わない
・スタイルシートだけでテキストBOXだけを右寄せにする方法
・JavaScriptライブラリを使用してテキストBOXだけを右寄せにする方法
・スタイルシート単独もJavaScriptライブラリを使用しても出来ない場合は
　「出来ない」との明言を

こんな感じでお願いします。
よろしくお願いします。

No.1 ベストアンサー 回答者： riqua 回答日時： 2009/07/24 10:23

はじめまして。

CSSだけで実現する方法としては属性セレクタ（Attribute selectors）と呼ばれる指定方法があります。ただしこれは、一般的なモダンブラウザでは対応しているはずですがIE6以下では反応しません。

書き方としては、
[attribute=value]

inputの1行テキストボックスだけに適応させるには、
input[type="text"] { (ここにスタイル） }

という書き方ができます。
ご参考になれば幸いです。

この回答へのお礼

最初意味がわからなかったのですが。
すごい。すばらしいです。知りませんでした。
こんな書き方があるんですね。大変感謝です。

試した環境が運よくIE7とFF3でどちらも確認できました。
ただ、IE系は最初はDOCTYPE無しで記述していたので互換モードに引っかかり
うまくいきませんでしたが、記述することでこれも回避できました。

正直、スタイルシートのみについてはまず無理だろうと思いながら
でも、もしかしたらと思い、とりあえず質問してみたのですが、
今回は本当に質問した価値がありました。

大変勉強になりました。ありがとうございました。

お礼日時：2009/07/27 12:52

No.3 回答者： noname#119957 回答日時： 2009/07/25 13:53

■HTMLタグの中にcss styleを各方法

<input name="" type="text" style="text-align: right;" />

style="text-align:right;"などのように記述可能です。
""中の指定はネストでたくさん入れられます。

この回答への補足

これだと「1つ1つ指定」しなければならないのではないでしょうか？
1つ1つ指定というのはしたくないのです。すみません。

補足日時：2009/07/27 13:06

この回答へのお礼

ありがとうございました。

お礼日時：2011/11/06 10:32

No.2 回答者： riqua 回答日時： 2009/07/24 10:55

連稿失礼します。

No.1です。

補足です。
jQueryというJavascriptライブラリが公開されています。
これを使用すればIE6でも属性セレクタが使用できるようになります。
「スタイルシート単独」or「javaScriptライブラリ単独」にも当たらなくなってしまいますが…。

*日本語リファレンスを公開されているサイト
http://stacktrace.jp/jquery/

*「IE6でもCSS3の属性セレクタを使う」
http://blog.chibatch.jp/mark-up/jquery-css3-attr …

この回答へのお礼

jQueryはただいま勉強中です。
今はjquery.csv2tableとかjquery.jqchartを試しています。
便利ですよね。

「このライブラリらへんを使えばなんかできそうだ」とは思っていたのですが
出来ることがたくさんあって把握出来ていませんでした。

参考になりました。ありがとうございました。

お礼日時：2009/07/27 13:03