docs/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 }