input要素 <input type="file">にcssでマウスオーバーを指定することはできませんか？

HTML

　　<table class="a">
    <tr><td>
　　　<label for="file_photo" class="file" name="tmp_photo2" value="" /> 
	ファイルを選択
	<input type="file" id="file_photo" style="display:none;">
　　　</label>
     </td></tr>
   </table>

CSS

a
1a {
2	display: block;
3	width: 160px;
4	height: 45px;
5	background: url(btn_info_bg.jpg) no-repeat;
6}
7a:hover {
8	/* IE6用設定 */
9	background-color: #000;
10}
11a:hover img {
12	/* ロールーオーバー時にimg要素を非表示 */
13	visibility: hidden;
14}
15

kei344

2017/11/27 08:07

CSSもコードブロックに入れてください。コードブロックは ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、HTMLとCSSが関係が無い箇所なので、内容を確認してみてください。

YukikoHamabe

2017/11/27 08:16

失礼しました。訂正させて頂きました。

行動規範の内容に同意します

回答3件

<input type="file">がdisplay: noneとなっている以上、そもそも「マウスオーバーした」と認識される事自体がないかと思います。

見えている<label>にマウスオーバーを仕掛けるのが適当ではないかと思います。

投稿2017/11/27 08:11

maisumakun

総合スコア145183

YukikoHamabe

2017/11/27 08:20

ご解答ありがとうございます。ファイル選択ボタンにマウスオーバーをつけることはできますか？難しかったら、すみません。スルーしてください。

行動規範の内容に同意します

ベストアンサー

label要素にname属性, value属性は存在しません。aとするとa要素に装飾をすることになってしまうので、.aとする必要があります。また、コード中に全角スペースが入っているので、それも取り除いておいたほうが良いと思います。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <style>
6        .a {
7            display: block;
8            width: 160px;
9            height: 45px;
10            background: url(https://placehold.jp/3d4070/ffffff/150x150.png?text=btn_info_bg.jpg) no-repeat;
11        }
12
13        .a:hover {
14            /* IE6用設定 */
15            background: #000;
16        }
17
18        .a:hover img {
19            /* ロールーオーバー時にimg要素を非表示 */
20            visibility: hidden;
21        }
22    </style>
23</head>
24<body>
25<table class="a">
26    <tr>
27        <td>
28            <label for="file_photo" class="file">
29                ファイルを選択
30                <input type="file" id="file_photo" style="display:none;" name="tmp_photo2" value="">
31            </label>
32        </td>
33    </tr>
34</table>
35</body>
36</html>

投稿2017/11/27 08:15

s8_chu

総合スコア14731

YukikoHamabe

2017/11/27 08:31

ご教授ありがとうございます。m(_ _)m <input type="file">にマウスホバーを装飾することは出来るんですね！ Thank you so much.

s8_chu

2017/11/27 08:39

> <input type="file">にマウスホバーを装飾することは出来るんですね！いいえ、`<input type="file">`に対してホバー時のスタイルを指定することはできません。なので、回答文のコードではその祖先要素にホバー時のスタイルを設定することで解決しています。

x_x

2017/11/27 08:39

ううん、IE6はa要素にしかhoverが効かないので、なんか気持ち悪いですね。コメントがなければスルーするのですが……。

YukikoHamabe

2017/11/27 08:51

ありがとうございます。どの解答がベストアンサーか解らないので、できません。クライアントさんに交渉していますので、一旦私の質問はこれでクローズさせて頂ければ幸いです

s8_chu

2017/11/27 09:11

> IE6はa要素にしかhoverが効かないので 1*年前の腐った牛乳はちょっと･･･対応外です。

YukikoHamabe

2017/11/27 09:15

牛乳はよく解りませんが一番役に立ちましたので、選ばせて頂きました。ありがとうございました。

行動規範の内容に同意します

CSS
1input[type="file"]:hover {
2  /* プロパティ */
3}

でいけますが、提示のコードだとdisplay: none;されているので上記が動くことはありません
また、<label>要素はname属性もvalue属性も持ちません
閉じタグになっているのも修正した方が良いでしょう

投稿2017/11/27 08:15

退会済みユーザー

総合スコア0

YukikoHamabe

2017/11/27 08:18

ご解答ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

input要素 <input type="file">にcssでマウスオーバーを指定することはできませんか？

関連した質問