file-appearance-basic.html | Explore in Territory

<!DOCTYPE html>
<meta name=fuzzy content="maxDifference=0-3; totalPixels=0-100">
<style>
input {
  margin: 4px;
}
</style>
<body>
<div>Normal: <input type=file>
Disabled: <input type=file disabled></div>
<div>
Various sizes:
<input type=file style="width:1em">
<input type=file style="width:2em">
<input type=file style="width:3em">
<input type=file style="width:4em">
<input type=file style="width:5em">
<input type=file style="width:6em">
<input type=file style="width:7em">
<input type=file style="width:8em">
<input type=file style="width:9em">
<input type=file style="width:10em">
<input type=file style="width:11em">
<input type=file style="width:12em">
<input type=file style="width:13em">
<input type=file style="width:14em">
<input type=file style="width:22em">
<div dir="rtl">
<input type=file style="width:1em">
<input type=file style="width:2em">
<input type=file style="width:3em">
<input type=file style="width:4em">
<input type=file style="width:5em">
<input type=file style="width:6em">
<input type=file style="width:7em">
<input type=file style="width:8em">
<input type=file style="width:9em">
<input type=file style="width:10em">
<input type=file style="width:11em">
<input type=file style="width:12em">
<input type=file style="width:13em">
<input type=file style="width:14em">
<input type=file style="width:22em">
</div>
<div>
<input type=file style="height:8px">
<input type=file style="height:30px; border:1px solid lightgray;">
</div>
</div>

<div>
Font-size, text-shadow, text-decoration:
<input type=file style="font-size:20px; text-shadow:1px 1px 2px lime;">
<input type=file style="text-decoration:underline">
</div>

<div>
<style>
.button-display-none::-webkit-file-upload-button {
  display: none;
}
.button-appearance-none::-webkit-file-upload-button {
  -webkit-appearance: none;
}
.button-shadow::-webkit-file-upload-button {
  box-shadow: 8px 8px 8px gray;
}
</style>
Styling ::-webkit-file-upload-button:
<input type=file class="button-display-none">
<input type=file class="button-appearance-none">
<input type=file class="button-shadow">
<div>

<div>
<style>
.overflow {
  overflow: visible;
  width: 10px;
}
</style>
'overflow: visible' should not work:
<input type=file class=overflow>
</div>

</body>
chromium/third_party/blink/web_tests/fast/forms/file/file-appearance-basic.html
