| <!DOCTYPE html> |
| <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> |
