ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
質問者：rakuda2525 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>
質問投稿日時：08/03/16 03:00
質問番号：3866805
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答20pt
回答者：abril すみません、ANo.2で誤字や適切でない言い回しがあったので訂正しておきます。

×Firefoxで確認してみましたが。よく見ると、参照先URLが表示される
↓
○Firefoxで確認してみましたが、よく見ると、参照先パスが表示される
種類：回答
どんな人：専門家
自信：参考意見
回答日時：08/03/17 14:01
回答番号：No.3
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答

 
回答者：abril 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>タグは環境によって表示される幅の解釈が異なるので、「参照ボタン」の後ろに右枠線までの余白が結構できる場合もあります。

とでもします。
種類：回答
どんな人：専門家
自信：参考意見
回答日時：08/03/17 10:49
回答番号：No.2
この回答へのお礼ありがとうございます。参考にさせていただきます！

回答

 
回答者：abril > 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​
種類：アドバイス
どんな人：専門家
自信：参考意見
回答日時：08/03/16 11:56
回答番号：No.1
この回答への補足やはりこのタグは特別なんでしょうか・・。
裏技などで反映させる方法等が分かりましたら、改めてコメント頂けると助かります。ありがとうございました。
この回答へのお礼この回答にお礼をつける(質問者のみ)
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ