/ext-4.0.7/resources/themes/stylesheets/ext4/default/widgets/form/_file.scss

 1@mixin extjs-form-file {
 2
 3    .#{$prefix}form-file-wrap {
 4        .#{$prefix}form-text {
 5            color: #777;
 6        }
 7
 8        .#{$prefix}form-file-btn {
 9            overflow: hidden;
10            float: left;
11        }
12
13        .#{$prefix}form-file-input {
14            position: absolute;
15            top: -4px;
16            right: -2px;
17            height: $form-field-height + 8;
18            @include opacity(0);
19
20            /* Yes, there's actually a good reason for this...
21             * If the configured buttonText is set to something longer than the default,
22             * then it will quickly exceed the width of the hidden file input's "Browse..."
23             * button, so part of the custom button's clickable area will be covered by
24             * the hidden file input's text box instead. This results in a text-selection
25             * mouse cursor over that part of the button, at least in Firefox, which is
26             * confusing to a user. Giving the hidden file input a huge font-size makes
27             * the native button part very large so it will cover the whole clickable area.
28             */
29            font-size: 100px;
30        }
31    }
32}