title: ExtJS 4 - Styling the button of a filefield xtype
body: <p>Good day, I am building a web application and the user is allowed to upload a photo using a <code>fileField</code>. I am trying to style the button, however, nothing I try seems to work. At first I tried using the element inspector to look for the proper class type but that did not give the results I wanted. Next, I assigned a class to the fileField and created a css for that style but it did not work either. Here is my code:</p>
  
  <p>my filefield</p>
  
  <pre><code>{
  
      xtype: 'filefield',
      x: 200,
      y: 910,
      cls: 'fileBtnClass',
      width: 200,
      fieldLabel: 'LABEL',
      hideLabel: true,
      labelStyle: 'text-align: center; color: white',
      labelWidth: 140,
      buttonOnly: true,
      buttonText: 'Browse'
  
  }
  </code></pre>
  
  <p>my css:</p>
  
  <pre><code>.fileBtnClass {
      font-size: 40px !important;
      font-family: 'Arial' !important;
      font-weight: normal !important;
      color: black !important;
      background-color: white !important;
      border-radius: 15px !important;
      text-align: center;
  }
  </code></pre>
  
  <p>What happens is that the button size gets larger to accommodate the text. However, the text itself does not get larger in any way. </p>
  
  <p>Can anyone help me with my situation? Styling certain fields in ExtJS proves to be a pinch at times. Any help is very much appreciated. Thank you.</p>