button-div内のどこでも入力フィールドをクリック可能にする

Question

私はFileUploadを実装しており、より良い見た目にするためにブートストラップボタンクラスを使って<div>を作成しました。

私はこれを行って以来、特定の位置（ 'aufnehmen'の上）でinputをクリックするだけです。

divのどこかをクリックすると、ウィンドウを開く方法を教えてもらえますか？

ここに私の問題を示すフィドルがあります。

.btn-lg{ 
 
    font-size: 36px !important; 
 
} 
 

 
.fileUpload { 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 10px; 
 
} 
 

 
.fileUpload input.upload { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 20px; 
 
    cursor: pointer; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 

 
<div class="fileUpload btn btn-primary btn-lg"> 
 
     <span>Foto aufnehmen</span> 
 
     <input type="file" accept="image/*" name="sampleFile" id="cameraImg" class="upload" onchange="processImg(this)" 
 
       value=""> 
 
    </div>

Answer 1

あなたはファイル入力をラップするlabelの代わりdivを使用することができます。

<label for="cameraImg"> 

.btn-lg { 
 
    font-size: 36px !important; 
 
} 
 
.fileUpload { 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 10px; 
 
} 
 
.fileUpload input.upload { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 20px; 
 
    cursor: pointer; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 

 
<label for="cameraImg" class="fileUpload btn btn-primary btn-lg"> 
 
    <span>Foto aufnehmen</span> 
 
    <input type="file" accept="image/*" name="sampleFile" id="cameraImg" class="upload" onchange="processImg(this)" value=""> 
 
</label>

Answer 2

あなたが追加することができます。

.fileUpload input.upload { 
    width: 100%; 
    height: 100%; 
} 

Answer 3

をあなたはinputにheight: 100%を設定することにより、この問題を解決することができます

.btn-lg { 
 
    font-size: 36px !important; 
 
} 
 
.fileUpload { 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 10px; 
 
} 
 
.fileUpload input.upload { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 20px; 
 
    cursor: pointer; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
    border: 1px solid #C00; 
 
    height: 100%; /* add this rule */ 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<div class="fileUpload btn btn-primary btn-lg"> 
 
    <span>Foto aufnehmen</span> 
 
    <input type="file" accept="image/*" name="sampleFile" id="cameraImg" class="upload" onchange="processImg(this)" value=""> 
 
</div>

を0

Answer 4

セットwidth:100%; height:100%;それが動作input.uploadのために...試してみてください、以下のチェック

.btn-lg{ 
 
    font-size: 36px !important; 
 
} 
 

 
.fileUpload { 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 10px; 
 
} 
 

 
.fileUpload input.upload { 
 
    width:100%; 
 
    height:100%; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 20px; 
 
    cursor: pointer; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 

 
<div class="fileUpload btn btn-primary btn-lg"> 
 
     <span>Foto aufnehmen</span> 
 
     <input type="file" accept="image/*" name="sampleFile" id="cameraImg" class="upload" onchange="processImg(this)" 
 
       value=""> 
 
    </div>

Answer 5

スニペットこの

.btn-lg{ 
 
    font-size: 36px !important; 
 
} 
 

 
.fileUpload { 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 10px; 
 
} 
 

 
.fileUpload input.upload { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 20px; 
 
    cursor: pointer; 
 
    opacity: 0; 
 
    filter: alpha(opacity=0); 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 

 

 
<div class="fileUpload btn btn-primary btn-lg" > 
 
Foto aufnehmen 
 
<input type="file" style="opacity: 0.0; position: absolute; top:0; left: 0; bottom: 0; right:0; width: 100%; height:100%;" /> 
 
</div>

Answer 6

あなたはすぐにあなたの問題に答えの束を得ましたしかし、私はそれがどのような問題であるかをどのようにして見つけ出したかを示すことも重要だと思います。そのような問題を一般的にデバッグする方法です。

デベロッパーコンソールの要素を調べ、そのコードの上にカーソルを置くと、アウトラインが強調表示されます。

そのように、あなたが入力要素自体がボタンほど高くないことがわかりますし、その領域の外のクリックは、入力のクリックイベントをトリガしなかった理由です。

その時点から、あなた自身の解決策を提示することができました（いくつかの回答としてheight: 100%を設定するか、top: 0; right: 0; bottom: 0; left: 0など）。