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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

6804閲覧

input[type="file"]のボタンを画像に置き換える際のIEの動きについて

mong

総合スコア7

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/09/24 04:51

ファイル参照のボタンを画像で置き換えるために<label for="...">を使用しましたが、formタグに囲まれている場合は、想定通り動作しません。(クリックしてもファイル選択ダイアログが立ち上がらない)
IE(IE11)では動作しませんが、chromeやfirefoxでは動作することは確認しました。

<form> <label for="file"> <img src="hoge.png" alt="クリックできない" style="cursor: pointer;"> <input id="file" type="file" style="display:none"> </label> </form>

調査してみたところ、formタグに囲まれているのが影響しているようです。
formタグに囲まれていない場合は、想定通り動作します。

<label for="file2"> <img src="hoge.png" alt="クリックできる" style="cursor: pointer;"> </label> <input id="file2" type="file" style="display:none">

formタグ内かつ、IEに対応するためにはjavascriptを記述するしかないのでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

  1. label要素をブロックとして表示
  2. img要素にpointer-events: none;を指定

という方法があるようです。

CSS

1label { 2 display: inline-block; 3} 4 5label img { 6 pointer-events: none; 7} 8 9input[type=file] { 10 display: none; 11}

HTML

1<form> 2 <label> 3 <img alt="クリックできない"> 4 <input type="file"> 5 </label> 6</form>

投稿2016/09/24 06:26

sii_side

総合スコア849

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mong

2016/09/24 10:12

上記の方法で解決できることを確認しました。 ありがとうございます。
guest

0

できなくはないですよ。
これは#fileについてるdisplay: none;が原因なので別の方法で見えなくします。
一例として#fileからdisplay: none;を削除しこのcssをあててみてください。

css

1label { 2 overflow: hidden; 3 position: relative; 4} 5#file { 6 position: absolute; 7 left: -99999px; 8}

投稿2016/09/24 06:13

gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mong

2016/09/24 10:11

ご意見ありがとうございます。 試してみましたが、うまくいきませんでした。
guest

0

このあたりは御覧になられましたか?一度お試しください。

【input[type=file]をデザイン的になんとかする方法 - Qiita】
http://qiita.com/ituki_b/items/e38ab67a00f66da4e865

【input要素のtype="file"を装飾する方法 | SONICMOOV LAB】
https://lab.sonicmoov.com/markup/input-type-file/

【input type=”file” を画像ボタンに変更する方法 ファイルアップロードをカスタマイズ | Stronghold Archive】
https://zxcvbnmnbvcxz.com/input-typefile-を画像ボタンに変更する方法/

投稿2016/09/24 06:13

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mong

2016/09/24 10:10

上記のリンクは全て参照済みです。 本文にも書きましたとおりjavascriptを使用しない解決方法を求めています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問