Styling Inputs

You can style any input by adding your own classes or css rules, or by extending the payload classes. It's also possible to override the default class names using the Payload.Form styles parameter.

Standard CSS Styling

Style inputs using Bootstrap 4 classes

<input class="form-control" pl-input="amount" value="10.00">
<div class="form-control" pl-input="card_number"></div>

To style a secure input you can apply any custom style directly to the <div> or <input> element as shown in the corresponding Bootstrap example.

Extend Payload Classes

.pl-input {
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    padding: .375rem .75rem;
    outline: none;
}

Another approach to styling inputs is to add a CSS rule for the CSS classes below.

Payload's default CSS classes:

• pl-input
• pl-input-sec
• pl-focus
• pl-invalid

Override Default Classes

Using the Bootstrap 4 invalid class

<script>
new Payload.Form({
    form: document.getElementById('checkout-form'),
    styles: { invalid: 'is-invalid' } /* override default style class */
})
</script>

Instead of extending the default Payload classes, you can change the default class for state changes like invalid to use a custom class.

Trigger Changes on JS Events

Setting custom classes via events

<script>
new Payload.Form({
    form: document.getElementById('checkout-form'),
}).on('focus', function(evt) {
    /* handle focus event */
    $(evt.target).addClass('my-focus')
}).on('blur', function(evt) {
    /* handle blur event */
    $(evt.target).removeClass('my-focus')
}).on('invalid', function(evt) {
    /* handle invalid event */
    $(evt.target).addClass('my-invalid')
}).on('valid', function(evt) {
    /* handle valid event */
    $(evt.target).removeClass('my-invalid')
})
</script>

For more advanced control over styling and UX of the secure input, Payload.js provides event triggers for state changes of the inputs.

You can listen for events like blur and invalid, and handle the style and UX changes required for that event.