<!DOCTYPE html>
<html>
<head>
<title>File input alignment with CSS padding and border</title>
<style type="text/css">
span, input {
display: inline-block;
vertical-align: top;
margin: 0px;
}
.pad-all { padding: 10px; }
.pad-top { padding-top: 10px; }
.bor-all { border: 10px solid DarkGray; }
.bor-top { border-top: 10px solid DarkGray; }
input::-webkit-file-upload-button {
/* Bug is about file name and padding, not button,
* and platform-specific button-rendering is flakey.
*/
-webkit-appearance: none;
}
</style>
</head>
<body>
<p>Bug <a href="http://webkit.org/b/109011">109011</a>: File upload control doesn't apply CSS vertical padding or border to file name</p>
<p>For this test to pass, the file name (or "No file chosen") should line up with the button text below, with CSS padding and borders overall or on the top, and in combinations thereof.</p>
<span><input type="file" class="pad-all"/></span>
<span><input type="file" class="pad-top"/></span>
<br/>
<span><input type="file" class="bor-all"/></span>
<span><input type="file" class="bor-top"/></span>
<br/>
<span><input type="file" class="pad-all bor-all"/></span>
<span><input type="file" class="pad-all bor-top"/></span>
<br/>
<span><input type="file" class="pad-top bor-all"/></span>
<span><input type="file" class="pad-top bor-top"/></span>
</body>
</html>
Codebase Browser
chromium