
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ベストアンサー
- 回答日時:
はじめまして。
CSSだけで実現する方法としては属性セレクタ(Attribute selectors)と呼ばれる指定方法があります。ただしこれは、一般的なモダンブラウザでは対応しているはずですがIE6以下では反応しません。
書き方としては、
[attribute=value]
inputの1行テキストボックスだけに適応させるには、
input[type="text"] { (ここにスタイル) }
という書き方ができます。
ご参考になれば幸いです。
最初意味がわからなかったのですが。
すごい。すばらしいです。知りませんでした。
こんな書き方があるんですね。大変感謝です。
試した環境が運よくIE7とFF3でどちらも確認できました。
ただ、IE系は最初はDOCTYPE無しで記述していたので互換モードに引っかかり
うまくいきませんでしたが、記述することでこれも回避できました。
正直、スタイルシートのみについてはまず無理だろうと思いながら
でも、もしかしたらと思い、とりあえず質問してみたのですが、
今回は本当に質問した価値がありました。
大変勉強になりました。ありがとうございました。
No.3
- 回答日時:
■HTMLタグの中にcss styleを各方法
<input name="" type="text" style="text-align: right;" />
style="text-align:right;"などのように記述可能です。
""中の指定はネストでたくさん入れられます。
No.2
- 回答日時:
連稿失礼します。
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を試しています。
便利ですよね。
「このライブラリらへんを使えばなんかできそうだ」とは思っていたのですが
出来ることがたくさんあって把握出来ていませんでした。
参考になりました。ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
idの中のid指定
-
個別にリンクの色を変える方法
-
CSS, リンクの色を一部変えるに...
-
このようなHTMLのコードがあっ...
-
divのクラス内のリンクの設定
-
cssでIEとFIREFOX(とchrome)の...
-
CSSとSSI 一緒に使えますか?
-
CSSファイルの#とか:とか...
-
name属性とid属性
-
htmlの文字が縦書きになる
-
複数のボタンを等間隔に、かつ...
-
form input テキストを上下中央...
-
htmlのolやulなどlistにtitleや...
-
ボタンをセル内一杯に表示させ...
-
マージソートの計算量について-...
-
含む含まないという概念自体の...
-
ヘッダーとフッターだけ背景を...
-
番号付きリスト(<Ol><Li>・・...
-
input type="hidden"で取得した...
-
inputタグでサーバにデータを送...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのid属性って必要なの?
-
個別にリンクの色を変える方法
-
idの中のid指定
-
liリストタグの背景色に色がつ...
-
サイトにjQueryが使用されてい...
-
HTML要素のid/class名の長さに...
-
CSSのクラス名・ID名の指定でワ...
-
a要素の色を複数使い分ける方法
-
FC2掲示板をトピック一覧表示型...
-
スタイルシートについて
-
CSSに同じclass名がいっぱい‥。...
-
brにクラスをつけてcssでdispla...
-
webデザイン 疑問点
-
CSS 記事内link色変更方法
-
親エレメントに含まれる子エレ...
-
cssでIEとFIREFOX(とchrome)の...
-
CSS内で使われる山括弧の意味が...
-
css:positionの挙動について
-
スタイルシートのドットが#に...
-
dreamweaverのコード画面で波線。
おすすめ情報