I am styling <apex:> tags with CSS but can't seem to align the inputFields correctly as they won't respond to padding, float:, or margin:.

enter image description here

VF Snippet

<!-- Form starts -->
<apex:pageBlockSection title="Recipient Information" columns="2" id="recipient">
    <apex:outputLabel value="First Name" styleClass="inputLabel">
        <apex:inputField value="{!rec.Name}" styleClass="inputField"/>


.inputField {
    box-sizing: border-box;
    padding: 7px;
    border-radius: 5px;
    border-color: grey;
    width: 300px;

.inputLabel {
    font-family: Salesforce Sans Regular;
    display: inline;
    float: left;
    margin-bottom: 8px;
    margin-right: 7px;

1 Answer 1


You don't need <apex:outputLabel>. <apex:inputField> automatically renders a label for you. If you need to override the label, you can use the label property on the <apex:inputField />.

  • Yes but when overriding the CSS of the inputField with styleClass the label disappears... besides that I cannot seem to align the inputFields
    – SpicyPat
    Feb 22, 2021 at 16:24
  • @SpicyPat You can also use apex:pageBlockSectionItem to force two columns. This may help.
    – sfdcfox
    Feb 22, 2021 at 17:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.