Firefoxで参照ボタンのURL入力欄をCSSで装飾できない
- Firefoxでフォームのファイル送信欄をCSSで装飾する方法がわかりません。
- inputタグの枠線を赤で表示するCSSを設定していますが、Firefoxではファイル送信欄が装飾されません。
- IEでは問題なく表示されるので、Firefox独自の仕様の可能性があるかもしれません。
- ベストアンサー
Firefoxで参照ボタンのURL入力欄をCSSで装飾出来ない。（formで設定したfile入力欄をCSSで制御する方法）
以下の記述（inputタグの枠線を赤で表示）をしているのですが、inputタグのファイル送信欄だけ装飾されません。 IEではちゃんと表示されました。 どこが問題なのでしょうか？ お分かりの方いらっしゃいましたら回答よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test page</title> <style type="text/css"> form { background:#99FF99; } input { border:5px solid #FF0000; } </style> </head> <body> <form action="test.php" method="post" enctype="multipart/form-data"> テキストの入力欄 <input type="text" name="test_text" /> <br /><br /> ファイル送信欄 <input type="file" name="test_file" /> <br /><br /> <input type="submit" value="送信する" /> </form> </body> </html>
- rakuda2525
- お礼率27% (18/65)
- HTML
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
すみません、ANo.2で誤字や適切でない言い回しがあったので訂正しておきます。 ×Firefoxで確認してみましたが。よく見ると、参照先URLが表示される ↓ ○Firefoxで確認してみましたが、よく見ると、参照先パスが表示される
その他の回答 (2)
- abril
- ベストアンサー率69% (388/560)
Firefoxで確認してみましたが。よく見ると、参照先URLが表示されるテキストボックスの方にはうっすらとしたボーダーのスタイルが適用されてはいるみたいですね。「参照」ボタンの方はIEと違ってプレーンなままの様ですが。 裏技と言えるかどうかわかりませんが、「とりあえず<input type="file" />の場合も全体が赤いソリッドな5pxの線で囲まれていればいい」というだけでしたら、入れ子になってしまいますが、 p.hogehoge { border: 5px solid #ff0000; } p.hogehoge input { border: none; } とでもしてinputタグを囲む親のスタイルを定義しておいて、<input type="file" name="test_file" />の時だけ, <p class="hogehoge"><input type="file" name="test_file" /></p> とすれば、IEでもFirefoxでも、テキストボックスと参照ボタンひとまとめでなら、囲めます。 ただし、<p>で囲むとブロックの長さ分だけ広がってしまうので、それを回避する場合は： (1)p.hogehogeに更に"display: inline"を追加する。 ※インライン要素となってしまう為か、FirefoxやOperaの場合ボトムのボーダーが実質1pxぐらいの細さで表示されています（IEでは均質でした）。 (2)p.hogehogeに更に"width: 値"でインプット・フィールドが充分入りきるぐらいの余裕を持った幅を決めうちしておく。 ※<input>タグは環境によって表示される幅の解釈が異なるので、「参照ボタン」の後ろに右枠線までの余白が結構できる場合もあります。 とでもします。
- abril
- ベストアンサー率69% (388/560)
> inputタグのファイル送信欄だけ装飾されません。 ぱっと見た限り特にCSSにおかしいところはない様ですし、今Firefoxでの表示結果を確認できない状況なので断言は避けますが、<input type="text">は確実に問題ないのですが確か<input type="file">でのborderプロパティは反映されていなかったかと…。 ※Firefoxで実際に検証された方の結果が違っていましたら、お詫び致します。 <input type="file">はディフォルトでもかなり環境（ブラウザ＆OSの組み合わせ）で見え方が異なるので、CSSの各プロパティの適用のされ方も微妙に違う様です。 Firefoxのヴァージョンはちょっと古いですが、下記のコンテンツでフォームの部品に対する各環境でのプロパティの適用結果がまとめられていて、参考になるかも。 http://www.k-jouhou.info/~kanri-gamen/css/preview/file.html
補足
やはりこのタグは特別なんでしょうか・・。 裏技などで反映させる方法等が分かりましたら、改めてコメント頂けると助かります。ありがとうございました。
関連するQ&A
- 初歩的な質問で恐縮ですが、教えてください。
すみませんが、教えてください。 入力フォームでデータが送れなくて、困っています。 下のコードに問題点はあるのでしょうか？ 自分では、分からないので、よろしくお願いいたします。 test1.php------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> </head> <body> <form method="post" enctype="multipart/form-data" action="./test2.php"> <input type="text" name="fmTitle" ><br /> <input type="submit" value="次へ" > </form> </body> test2.php-------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> </head> <body> <?= $fmTitle . "<br />" ?> </body>
- ベストアンサー
- PHP
- 入力欄の高さが揃わない
入力欄の高さをスタイルシートで設定しているのですが、何故かxhtmlだとfirefoxやNNで高さがおかしくなります。 <?xml version="1.0" encoding="euc-jp"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp" /> <title>テスト</title> </head> <body> <form method="post" action=""> <input style="height:20px" type="text" name="username" /> <input style="height:20px" type="password" name="password" /> </form> </body> </html> このソースはテスト用に書いたものですが、ピクセルで指定しているのにIEとNNやfirefoxで高さが違うのです。およそ5pxほどの差が出てしまうのですが、原因が分からずに困っています。xhtmlの宣言がおかしいのかもと思っていろいろと試しましたがダメでした。どなたか、知恵をお貸しくださいませ。
- ベストアンサー
- HTML
- ファイル名入力フィールドのボタンを黒字にしたい。
ファイル名入力ボタンの参照ボタンを太字(bold)にすることはできないのでしょうか？下ののようなサンプルHTMLで通常のボタンは太字(bold)になるのにファイル名入力ボタンの参照ボタンが黒字になりません。よろしくご教授下さい。 --サンプルHTML <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html ; charset=Shift_JIS"> <title>ボタンを太字にしたい</title> <style type="text/css"> input.button { font-weight:bold; } </style> </head> <body> <input type="submit" name="Submit" value="送信" class="button"> <input type="file" name="textfield" class="button"> </body> </html>
- 締切済み
- HTML
- inputの中身を書き換える方法について
下記で書き換え実行ボタンを押下すると、初期値1は変更後1に変わるのですが、初期値２と初期値３が変わりませんでした。 そのため、inputの中を書き換えるには、divの場合とは違う書き方をしないといけないのかと思ったのですが、どのように記述すればよいかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="JavaScript" type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- $(function(){ $("#change").click(function(){ $("#text1").html("変更後１"); $("#text2").html("変更後２"); $("#text3").html("変更後３"); }); }); // --> </script> <title>title</title> </head> <body> <form> <input id="change" type="button" value="書き換え実行" /> </form> <br /> <div id="text1">初期値１</div> <input type="text" name="text2" id="text2" value="初期値２" /> <input type="hidden" name="text3" id="text3" value="初期値３" /> </body> </html>
- ベストアンサー
- AJAX
- 前後の全角スペースを削除すると文字化けする
PHP初心者です。 trimファンクションを使って前後の全角スペースを削除したいのですが $test = " 左右に全角スペースがある文字列 "; echo trim ( $test , " " ); だと問題なく表示されるのですが以下のようにテキストボックスに入力した文字の 前後の全角スペースを削除しようとすると最初の１文字目が文字化けします。 ●test_input.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>前後の全角スペースを削除する</title> </head> <body> <form action="test.php" method="get"> <dl> <dt>文字を入力してください。</dt> <dd><input type="text" name="test" size="50" maxlength="50" id="test" /> </dd> </dl> <input type="submit" value="送信する" /> </form> </body> </html> ●test.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>前後の全角スペースを削除する</title> </head> <body> <p>入力文字</p> <?php $test = ($_REQUEST['test']); echo ($test); ?> <br /> <br /> <p>trim ( $test , " " )</p> <?php echo trim ( $test , " " ); ?> </body> </html> どこがいけないのでしょうか？ よろしくお願いします。
- ベストアンサー
- PHP
- HTMLの書き方について質問です(初心者)。
[HTML & スタイルシート トレーニングブック]という本を見ながらHTMLを勉強中です。 この本ではHTMLの書き出し部分は下記のようになっております。 ================================================================================== [ 1 ] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 [ 2 ] Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> [ 3 ] <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> [ 4 ]<head> [ 5 ]<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> [ 6 ]<title>Osteria Grazie［イタリア料理の店］</title> [ 7 ]<link href="message.css" rel="stylesheet" type="text/css" /> [ 8 ]</head> ================================================================================== ところがこのままテキストで書き写し使用しても正しく表示されません。 （具体的に言うと感じやひらがなが文字化けしてしまいます。） こちらの [ 5 ] を下記のように修正すると正しく出力することができます。 ================================================================================== [ 5 ]<meta http-equiv="Content-Type" content="text/html; charset="utf-8" /> ↑[ここに[ " ]を書き加える。 ================================================================================== ただし、サンプルディスクに入っているhtmlデータは上記のままで動きます。 どうしてなのでしょうか？ 分かる方がいらっしゃいましたら回答お願いします。 また、修正後の ================================================================================== [ 5 ]<meta http-equiv="Content-Type" content="text/html; charset="utf-8" /> ↑[ ? ] ↑[ここに[ " ]を書き加える。 ================================================================================== につきましても、これで正しく表示されるのはいいのですが、そうなると上記の[ ? ]部分の[ " ]の閉じ部分がなくなってしまう気がするのですが、なぜこれで動くのでしょうか？ よろしくお願いします。 一応下に本に付いていたサンプルデータを書き出しておきます。 分かる方がいらっしゃいましたらお願いします。 【サンプルデータ】 ================================================================================== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Osteria Grazie［イタリア料理の店］</title> <link href="message.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="contents"> <h1>Message</h1> <h2>ご意見ご感想をお書きください</h2> <form action="mailto:sotechsha@html.sever" method="post" enctype="text/plain"> ■名前<br /> <input type="text" name="name1" size="30" /><br /> ■メールアドレス<br /> <input type="text" name="email" size="30" /><br /> ■メッセージをお願いします<br /> <textarea name="message" rows="6" cols="50"></textarea><br /> </form> <div id="gotop"> <a href="index.html">Topページにもどる</a> </div> </div> </body> </html> ==================================================================================
- ベストアンサー
- HTML
- 作成したCSSがfirefoxでは見れますがIEでは反映されません
私が今作成しているCSSのサイトなのですが。。 firefoxでチェックしながらはちゃんとみれていたのですが、最終チェックでIEでみるとCSSが反映されずに表記されてどうにも困っています。 原因なんなのでしょうか？ お詳しい方お教えくださいませ。 -------------------------------------------------------------- <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <title>museo international</title> <link rel="stylesheet" type="text/css " href="css/index.css" media="screen.print" /> -------------------------------------------------------------- なにか違う所がありますか？どなたかお教えください。 困っています。
- 締切済み
- HTML
- legendの見え方？
フォームを作っているのですがfirefoxで見るとlegendの width指定が全く効きません・・・ ie6で見ると意図したように表示されます！ display:block;などいろいろ試してみたのですがなにも 変わらずでした。 firefoxでも意図したように見えるためにはどうすれば いいのでしょうか？宜しくお願いします。 ---html--- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="../css/form.css" type="text/css" /> <title>title</title> </head> <body> <div> <form name="form1" method="post"> <fieldset> <legend>情報1</legend> <label for="name">氏名<span class="check">※</span></label> <input type="text" name="NAME" class="w180" /><br /> <label for="address">住所<span class="check">※</span></label> <input name="ADDRESS" type="text" class="w180" /><br /> </fieldset> <fieldset> <legend>情報2</legend> <label for="tel">電話番号<span class="check">※</span></label> <input name="TEL" type="text" class="w180" /><br /> <label for="fax">FAX番号</label> <input name="FAX" type="text" class="w180" /><br /> </fieldset> <p align="center"><input type="submit" value="送信" /></p> </form> </div> </body> </html> ---css--- fieldset { display: block; width: 500px; margin: 0 auto 0.5em auto; padding: 5px; text-align: center; border: solid 1px #278ed1; font-family: verdana, sans-serif; line-height: 1.5em; } legend { display: block; width: 180px; height: 31px; margin-bottom: 5px; padding: 7px 0 3px 7px; background: #fff url(../images/form/legend_bg.gif) no-repeat; font-size: 1.1em; font-weight: bold; color: #fff; text-align: left; }
- ベストアンサー
- HTML
- ラジオボタンで入力項目の可・不可を切り替える方法
雑誌やネットを調べ、ラジオボタンで入力項目の可・不可を切り替える JavaScriptを見つけたのですが、思うように動作しません。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>Sample</title> <script type="text/javascript"> <!-- function radioChange() { if(document.form1.radioSelect[0].checked == true) { document.form1.04text.disabled = false; document.form1.04text.style.backgroundColor='#FFFFFF'; document.form1.05text.disabled = false; document.form1.05text.style.backgroundColor='#FFFFFF'; document.form1.06text.disabled = false; document.form1.06text.style.backgroundColor='#FFFFFF'; document.form1.07text.disabled = true; document.form1.07text.style.backgroundColor='#D4D0C8'; document.form1.08text.disabled = true; document.form1.08text.style.backgroundColor='#D4D0C8'; document.form1.09text.disabled = true; document.form1.09text.style.backgroundColor='#D4D0C8'; } else if(document.form1.radioSelect[1].checked == true) { document.form1.04text.disabled = true; document.form1.04text.style.backgroundColor='#D4D0C8'; document.form1.05text.disabled = true; document.form1.05text.style.backgroundColor='#D4D0C8'; document.form1.06text.disabled = true; document.form1.06text.style.backgroundColor='#D4D0C8'; document.form1.07text.disabled = false; document.form1.07text.style.backgroundColor='#FFFFFF'; document.form1.08text.disabled = false; document.form1.08text.style.backgroundColor='#FFFFFF'; document.form1.09text.disabled = false; document.form1.09text.style.backgroundColor='#FFFFFF'; } else { document.form1.04text.disabled = true; document.form1.04text.style.backgroundColor='#D4D0C8'; document.form1.05text.disabled = true; document.form1.05text.style.backgroundColor='#D4D0C8'; document.form1.06text.disabled = true; document.form1.06text.style.backgroundColor='#D4D0C8'; document.form1.07text.disabled = true; document.form1.07text.style.backgroundColor='#D4D0C8'; document.form1.08text.disabled = true; document.form1.08text.style.backgroundColor='#D4D0C8'; document.form1.09text.disabled = true; document.form1.09text.style.backgroundColor='#D4D0C8'; } } //--> </script> </head> <body onload="radioChange()"> <form action="" method="post" name="form1"> <table> <tr> <td> <input name="radioSelect" type="radio" onclick="radioChange()" value="1" /> 国内旅行 <input name="radioSelect" type="radio" onclick="radioChange()" value="0" /> 海外旅行</td> </tr> <tr> <td> </td> </tr> <tr> <td> 国内編：<br /> 希望地 <input type="text" name="04text" /> <br /> 希望日： <input type="text" name="05text" /> <br /> 乗り物： <input type="text" name="06text" /> </td> </tr> <tr> <td> </td> </tr> <tr> <td>海外編：<br /> 希望地 <input type="text" name="07text" /> <br /> 希望日： <input type="text" name="08text" /> <br /> 乗り物： <input type="text" name="09text" /> </td> </tr> </table> </form> </body> </html> テキストボックスの「name」を、英字から始めれば解決するのですが 事情があり、nameを数字で始める必要があります。 この解決方法を教えていただけませんでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 初歩的な質問ですが、入力に対して警告を行うには
こんにちは。PHP初心者です。 簡単なメールフォームについてご質問です。 以下のようなPHPですが、メールアドレスが正しく無い場合や、名前が未入力の場合に「確認画面ボタン」を押すと、「メールアドレスがただしくありません」や「お名前を入力してください」などの警告を出して 次に進めなくしたいのですが、どのような方法またはプログラムが最も簡単でしょうか？ 何卒、教えてください。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <title>無題ドキュメント</title> </head> <body> <form method='post' action='kk.php' name='mainform' onSubmit="return EntryCheck()"> メールアドレス<input type='text' size=60 name='mailadd' > <br /> <br /> 名前<input type='text' name='name' size=50 > <br /> <br /> <input name="submit" type="submit" value="確認画面へ"> </form> </body> </html>
- ベストアンサー
- PHP
お礼
ありがとうございます。参考にさせていただきます！