keik/designable-input-file.html

## designable-input-file.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  </head>
  <body>

    <h1>Designable <code>&lt;input type="file"&gt;</code></h1>

    <p>
      <code>&lt;input type="file"&gt;</code> have a default design each of web browser.
      If we would want to show same on each web browser, we might try to prepare hidden (<code>dipslay: none</code>) &lt;input type="file"&gt; and manipulate this via JavaScript.
    </p>
    <p>
      But with IE, when manipulate <code>&lt;input type="file"&gt;</code> via JavaScript, selected file couldn't be sent correctly.
    </p>
    <p>
      We need hack by making  <code>&lt;input type="file"&gt;</code> transparent (<code>opacity: 0</code>) instead of hidden (<code>display: none</code>).
      And this is such like a <strong>Clickjacking</strong>. So we should not do this, but...
    </p>

    <div>
      <h2>examples</h2>

      <div>
        <h3>normal</h3>
        <form action="" method="post" enctype="multipart/form-data">
          <div>
            <input type="file" name="file"/>
          </div>
          <div>
            <input type="submit"/>
          </div>
        </form>
      </div>

      <hr>

      <div>
        <h3>hacked</h3>
        <form action="" method="post" enctype="multipart/form-data">
          <div style="position: relative; display: table; overflow: hidden;">
            <input type="text" disabled="disabled"/><button type="button">Select file</button>
            <input type="file" name="file" style="position: absolute; top: 0; right: 0; font-size: 300px; opacity: 0"/>
          </div>
          <div>
            <input type="submit"/>
          </div>
        </form>
      </div>

      <hr>

      <div>
        <h3>hacked for reference (&lt;input type="file" style="opacity: 0.5; background-color: green; ..."&gt;)</h3>
        <form action="" method="post" enctype="multipart/form-data">
          <div style="position: relative; display: table; overflow: hidden;">
            <input type="text" disabled="disabled"/><button type="button">Select file</button>
            <input type="file" name="file" style="position: absolute; top: 0; right: 0; font-size: 300px; opacity: .5; background-color: green"/>
          </div>
          <div>
            <input type="submit"/>
          </div>
        </form>
      </div>
    </div>

  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	</head>
	<body>

	<h1>Designable <code><input type="file"></code></h1>

	<p>
	<code><input type="file"></code> have a default design each of web browser.
	If we would want to show same on each web browser, we might try to prepare hidden (<code>dipslay: none</code>) <input type="file"> and manipulate this via JavaScript.
	</p>
	<p>
	But with IE, when manipulate <code><input type="file"></code> via JavaScript, selected file couldn't be sent correctly.
	</p>
	<p>
	We need hack by making <code><input type="file"></code> transparent (<code>opacity: 0</code>) instead of hidden (<code>display: none</code>).
	And this is such like a <strong>Clickjacking</strong>. So we should not do this, but...
	</p>

	<div>
	<h2>examples</h2>

	<div>
	<h3>normal</h3>
	<form action="" method="post" enctype="multipart/form-data">
	<div>
	<input type="file" name="file"/>
	</div>
	<div>
	<input type="submit"/>
	</div>
	</form>
	</div>

	<hr>

	<div>
	<h3>hacked</h3>
	<form action="" method="post" enctype="multipart/form-data">
	<div style="position: relative; display: table; overflow: hidden;">
	<input type="text" disabled="disabled"/><button type="button">Select file</button>
	<input type="file" name="file" style="position: absolute; top: 0; right: 0; font-size: 300px; opacity: 0"/>
	</div>
	<div>
	<input type="submit"/>
	</div>
	</form>
	</div>

	<hr>

	<div>
	<h3>hacked for reference (<input type="file" style="opacity: 0.5; background-color: green; ...">)</h3>
	<form action="" method="post" enctype="multipart/form-data">
	<div style="position: relative; display: table; overflow: hidden;">
	<input type="text" disabled="disabled"/><button type="button">Select file</button>
	<input type="file" name="file" style="position: absolute; top: 0; right: 0; font-size: 300px; opacity: .5; background-color: green"/>
	</div>
	<div>
	<input type="submit"/>
	</div>
	</form>
	</div>
	</div>

	</body>
	</html>