• ベストアンサー

外部CSSでテキストボックスを設定したい。

クラスセレクタやIDセレクタを使わずに、外部CSSでテキストボックスのスタイルを設定したいのです。 サブミットボタンやチェックボックス等の他のINPUTパーツに影響しないように設定することは可能でしょうか? ブラウザはIE6です。

  • HTML
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

てっきりblogとかbody内の内容をいじれない状況かと思いましたがそうではないようですね。 テキストボックスだけの塊があるなら上位ブロックにclassを付け <div class="text"> <input type="text" ~> <input type="text" ~> <input type="text" ~> </div> CSSで .text input { ~ } とか。 でも、個別につけておいたほうがなにかと便利ではあります。 私個人の場合でいえば実際にはinputには fieldsetとかlabelとか少なくともpとか何かしらの要素で囲むのでinputにclassを付けるのは稀ですが、その上位の要素にはclassやidをほとんど付けています。

candie-o
質問者

お礼

なるほど、こう書けばいいんですねー。 言われれば納得ですが、全然気づきませんでした。 おかげでうまくいきました、ありがとうございました。

その他の回答 (1)

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

http://www.zspc.com/documents/css2/index.html#selector1 IE6で修飾したいinputを区別するのに使えるかもしれないのは 子孫セレクタと :first-line擬似要素ぐらい。 htmlの内容によってはできるかもしれないです。 (上位要素の構成に違いがあるとか、上位要素にはclassやidが付いてるとか) ただ、できたとしても偶然感が強いのでidやclassが付与できない状況で属性セレクタが使えない以上、出来ないものと思っていた方がいいようです。

candie-o
質問者

お礼

レスいただきありがとうございます。 テキストボックスの数が非常に多く、以前 input{[text="xxx"]のような使い方があった記憶があり(これはIEは不可だったはずですが)、こういった便利なやり方があればと思った次第です。 やはり外部で設定したい場合は、ひとつずつクラスセレクタをつけるのが一般的なやり方なんでしょうか。

関連するQ&A

  • CSSで、IDとCLASSを同時に設定することは可能ですか?

    <div ID="main" CLASS="sub"></div>のように スタイルシートで、IDにメインのスタイル CLASSにサブのスタイルを設定してみて、 とりあえず、firefox、IE6、で確認してみたところ、うまく動きました。 しかし、グーグルで”ID CLASS 同時”等で検索してみても、 同時に使えることが解説されたサイトが大変少なく、 果たして、同時使いは、CSSの構文違反にならないのか不安になり 質問させていただきました。 <div ID="main" CLASS="sub"></div>のようなセレクタ同時使いは、 やっても大丈夫なものなのでしょうか? サポートされていないブラウザがあったりすることはないのでしょうか?

    • ベストアンサー
    • HTML
  • CSSにおいて、画像とテキストの配置(回り込み)について

    CSS+HTMLによって、HPを作成しております。 HP作成ソフトはDream Weaver8です。 画像をテキストの左に回りこませる技術。 (例) ■■■■ テキストテキスト ■画像■ テキストテキスト ■■■■ テキストテキスト はスタイルシートで、画像にスタイルシートの ボックスのfloat定義でleftをつけて <div class="header" id="pageName"> <div id = "left"></div> <span class="style3">テキスト</span><br/> </div> このように設定すればよいのかと思ったのですが (headerは外部スタイルシートで、読み込み) 十分に画像をおくスペースがないと、 画像に、テキストがかぶってしまう場合や、(レイヤーが働いてしまう。)うまく、回り込まないのですが、どの設定が足りないのでしょうか。 ちなみにたっぷりとスペースをとった、divですと、 回り込ませることができたりしましたが、メニューdivなど 小さいスペースや縦幅が足りないとだめなのでしょうか。 画像のレイヤーの解除指定などをした方がよろしいのでしょうか。 まだ、初心者ですが、もし、ヒントだけでも、教えていた だけますと幸いです。

    • ベストアンサー
    • HTML
  • テキストボックス内のカレットのstyle

    CSSで、 <input type="textbox" size="20"> にフォーカスをあてたとき、テキストボックス内で 点滅するカレットのスタイルは定義できますか? マウスポインタの形を変更するってのは 見つけたのですが。。。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • スマホでテキストボックスに文字を入れようとすると、

    モバイルのサイトを作っているのですが、 body {font-size:0.9em;} input[type="text"] {width:200px;font-size:0.9em;} のようなcssを定義していて、 <input type="text" name="テキスト" id="テキスト" value=""> のように、テキストボックスを設置しているのですが、 スマホでテキストボックスに文字を入れようとすると、ズームされてしまいます。 これを避けるにはどうすればいいでしょうか? テキストボックスに文字を入力し終わっても、ズームが元に戻りません。 androidです。

    • ベストアンサー
    • HTML
  • 外部CSSを使ったテーブルが作りたいのですが・・・。

    以前こちらで質問させて頂いて、「スタイル作りはCSSで」、と教えて頂き、CSSの勉強を始めました。 早速壁に当たっていまして、お知恵を拝借したいです。 外部CSSファイルに、ul.gaibu{color:ff0000}と記すと、 HTMLファイルに<ul class="gaibu">ここは赤で表示</ul> となる事は出来たのですが、 テーブルの場合、 外部CSSファイルにdiv#table{設定値}を記し、 HTMLに<div id=table>とすると、外部CSSの設定値が反映されましたが、 <tr>や<td>の内容をどう設定して、HTMLにどう記載すれば反映するかが分かりません。 因みに外部CSSに tr.table1 {border:1px #333333 solid; line-height:25px; padding-left:10px; paddting-right:10px; text-align:left; vertical-align:middle} と記載し、HTMLの方に <tr><td class="table1">表1</td><tr>としましたが、 CSSの内容は反映されていません。 宜しくお願い致します。

  • 外部CSSからクラスを呼び出すとき

    CSSスタイルシート初心者です。 ネットショップを運営しているのですが、ほぼ同じレイアウトの商品紹介ページが多数あるため、外部CSSファイルを読み込ませて統一したいと思っています。 H1などのHTMLタグはちゃんと外部ファイルで設定して読み込ませることができるのですが・・・、 .text01{ text-align : left; margin-left : 10px; font-size : 14px; } 上記のように自分が作ったクラスをHTMLソースの中でどのように呼び出してよいのかいまいちわかりません。 本を読んでいると埋め込み方は、<div class="text01">・・・</div>のような感じで<div>でくくって記述するように書いてあるのですが、外部CSSの場合もこのような形で記述してよいのでしょうか? ホームページビルダーを使っていて、上記のように指定すると、CSSがテキストに適用はされるのですが、なぜか上記で表示した部分が赤色でエラーになっていることを示してしまいます。 何か文法的に誤っている所があるのでしょうか? どなたか是非アドバイスを宜しくお願い致します。

  • DreamweaverでCSSの「div id」設定方法

    DreamweaverMXを使ってCSSを独学している初心者です。OSはWindowsXPです。 以下のようなタグを使って作る時 <div id="aaa">の部分を、コード部分に直接タグを挿入する以外の、Dreamweaverの使い方があれば、お教えいただますでしょうか。 (煩雑になるのでタグの<title>より上は省略して載せています) <style type="text/css"> <!-- #aaa { background-color: #CCFFFF; width: 600px; } --> </style> </head> <body> <div id="aaa"> <p>表題</p> <p>例文ああああああああああああ</p> <p>事例</p> <p>例文いいいいいいいい </p> </div> </body> </html> 「#aaa」というスタイルは「CSSスタイル」パネルから新規CSSスタイルのセレクタタイプを「詳細(ID,コンテキストセレクタなど)を選択し、セレクタに「#aaa」と入力してスタイル定義で設定しました。 ・スタイル名が「.aaa」ではダメで「#aaa」でなくては出来ない点と、  <div id="aaa">部分が<div id="#aaa">ではダメな理由の知識もありません。 ・<p class="bbb">というスタイルの設定を、セレクタタイプを「クラス(すべてのタグに適用可能)」にして「.bbb」という名前にして設定したスタイルは 「文章のスタイルを適応したい部分を選択→スタイルを選択して右クリック→適応」で<p class="bbb">例文ううう</p>のようなタグが挿入されますが 「div id」の場合は同じような手順では出来ないのでしょうか? 私が持っているDreamweaverMXの解説書にはこのあたりのことが記載されていません。もしお勧めの本があれば そちらもお教えいただけると幸いです。 どうぞよろしくお願いいたします。

  • テキストボックスが、縦長になる

    このokwaveの質問テキストボックスのようなテキストボックスを作りたいです。 パソコンだけの利用です。スマホ対応は不要です。以下のようなcgiを書きました。 textarea{ のwidtを増やしたり、col=を増やしたりしていますが、横幅が狭いままで、縦長のテキストボックスになります。 どうすればよろしいでしょうか? <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style type="text/css"> textarea { width 1000ptx; height 40em; } </style> </head> <form action="insert_data.cgi" method="post"> <input type="hidden" name="mode" value="display_data"> Data text<br> <textarea name="data_text" value="" col="1000" rows="50"></textarea> <input type="submit" value="SUBMIT" style="font-size:x-large;" /> </form>

    • ベストアンサー
    • CGI
  • CSS ボックスの高さ指定

    例えば ▼html側 ------------------------------------------------------------- <div id="hako">あいうえおかきくけこさしすせそ</div> ------------------------------------------------------------- ▼css側 ------------------------------------------------------------- #hako{ width:500px; height:40px; } ------------------------------------------------------------- というソースで、あらかじめボックスの高さを指定しているとします。 この場合上記htmlの「あいうえお・・・」の部分の文量が多くなり テキストが2行3行となった場合、IEではその文量に応じてボックスの高さが伸びますが、 Firefoxではheight:40px;が不動のものになり、テキストがボックスの高さからあふれ出します。 これをFirefoxでもIEと同様にボックスの高さが可変するように出来ますか? css側でheight指定をしなければ、IE,Firefox共に文量に応じて可変するのですが、 デフォルトで表示領域をある程度確保しておきたいのです。

  • 外部CSSでフォントの指定

    自分のサイトの一部のページでは外部CSSで文字の色やフォントなどを設定しているのですが、 FireFoxでは反映されません。IEでは思い通りです。 調べてみて外部CSS、style.cssの改行をなくしたり先頭に@charset "shift_jis";を記述してみました。 そしたらなんとうまく文字色は変わりました。 しかしフォントは英字が"Verdana"にならないのです。 すべて"MS ゴシック"になってしまいます……IE、FireFox両方です。 私はMS ゴシックの英字が好きではないので、Verdanaなってくれればうれしいのですが……。 ちなみに、フォントの部分は  font-family: "Verdana", "Arial", "sans-serif", "MS ゴシック"; こんなふうに記述しています。 @charset "shift_jis";の記述を消して、 .htaccessが使えるサーバーなのでAddType text/css .cssを記述してみましたが変わりません。 どなたか大抵のブラウザで日本語をMS ゴシック、英字をVerdanaにする外部CSSの書き方を教えてください。

    • ベストアンサー
    • CSS

専門家に質問してみよう