Trying to help the client's designer with a CSS-related problem she's having with input fields in a Smart capture form (in Cloud Pages).

The problem is that Firefox treats padding differently than does Chrome with input fields. In Chrome, if you add 20px padding top and bottom, the line height is respected and the field's overall height is increased to accommodate the padding.

In Firefox, if you have a font size of 1.5em and a line height of 1.5em, but add top and bottom padding of 1em, the line height is effectively eliminated and text will not display.

The trick would seem to be to increase the field's height, but the f.css file that contains some default Fuel UX CSS style for forms and is overriding the custom CSS on the Smart Capture form. f.css is located here:


The style overriding height is this:

.fuelux input[type='text'],
.fuelux input[type='number'],
.fuelux input[type='email'] {
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
    height: 23px !important;

Is there a way to edit the f.css file or override it?

  • Just wondering if you ever were able to solve this?
    – Matt
    Commented May 11, 2017 at 5:15
  • 1
    The designer and I tried several changes and what ultimately worked was using "height: auto" and adding "!important" to the end of the line, like this: height: auto !important; Commented May 12, 2017 at 14:30


You must log in to answer this question.

Browse other questions tagged .