ボタンを入力と組み合わせるにはどうすればいいですか？

<!DOCTYPE html> 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
<body> 

<form id="image-form" action="#" class="w3-container w3-border w3-margin-top"> 
    <input id="mediaCapture" type="file" accept="image/*,capture=camera" > 
    <button id="submitImage" title="Add an image" class="w3-btn w3-dark-grey w3-left"> 
     <i class="material-icons">image</i> 
    </button> 
</form> 

</body> 
</html>

<input>は、テキストと「参照」ボタンをボタンを入力と組み合わせるにはどうすればいいですか？

を「いいえ、ファイル選択されていない」を作成し、私はまた、ボタンなどの画像アイコンを持っています。

ブラウズボタンの代わりにアイコンボタンを使用するにはどうすればよいですか？

アイコンボタンをクリックすると、画像を選択できるようにディレクトリが開きます。

ありがとうございました。

私はw3.cssフレームワークを使用しています。

出典

2016-11-15 Patrick

コードのPlunkerまたはJSFiddleの例を作成してください。ありがとう。 – tomepejo

このリンクはブートストラップ固有のものですが、必要に応じて変更することができます：https://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3 – nurdyguy

入力ファイルの可視性をゼロにする絶対配置を使用してボタンの上に配置します。また、ボタンの寸法と同じ寸法を設定します。 –

input要素の表示プロパティをhiddenに設定すると、label要素をクリックしてファイル選択プロセスをトリガーできます。アイコンをlabelの内側に置き、それに応じてスタイルを設定します。

label要素のfor属性がinput要素のクリックイベントをトリガするためにbutton要素のクリックイベントを設定し、その後、隠しにinput要素のdisplayプロパティを設定するid

inputファイルの

<style> 
    .hidden {display:none;} 
</style> 
<label for="mediaCapture"> 
    <i class="material-icons">image</i> 
</label> 
<input type="file" class="hidden" id="mediaCapture">

出典

2016-11-15 23:17:49 bob

と一致することを確認します。

<!DOCTYPE html> 
<html> 
<title>W3.CSS</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
<body> 

<form id="image-form" action="#" class="w3-container w3-border w3-margin-top"> 
    <input id="mediaCapture" type="file" accept="image/*,capture=camera" style="display: none;"> 
    <button id="submitImage" title="Add an image" class="w3-btn w3-dark-grey w3-left"> 
     <i class="material-icons">image</i> 
    </button> 
</form> 
<script src="jquery.js"></script> 
<script> 
    $('#submitImage').on('click', function(){ 
     $('#mediaCapture').trigger('click'); 
    }); 
</script> 
</body> 
</html>

出典

2016-11-16 01:43:52 ywDing

ボタンを入力と組み合わせるにはどうすればいいですか？

答えて

関連する問題