Style checkboxes and selected fields in forms

Comments

1 comment

  • Official comment
    Avatar
    Jane Vance

    Answer from ShortStack Support: This can be done via the Style Panel. Here's how to style the checkboxes: 

    1. Click the icon at the top to open the Style Panel
    2. Click the Form Widget in the Edit Widgets Panel to open the Form Widget settings in the Style Panel
    3. Within the Style Panel under ALL FORM, click RADIO & CHECKBOXES
    4. In the FANCY CHECKBOXES section, update the color in the box below Icon Selected Color
    5. Click Save at the bottom of the Style Panel

    Steps 1-4 are illustrated in the image below.


    Here's how to style the selected field border: 

    1. Click the icon at the top to open the Style Panel
    2. Click the Form Widget in the Edit Widgets Panel to open the Form Widget settings in the Style Panel
    3. Within the Style Panel under ALL FORM, click INPUT BOXES
    4. In the BOX SELECTED STATE section, update the color in the box below Selected Border Color
    5. Click Save at the bottom of the Style Panel

    Steps 1-4 are illustrated in the image below.


    For older Campaigns not using Style Panel: 

    If you are not using the Style Panel for your Campaign (older Campaigns), then you can update the color of the selected field borders:

    .field_block input, .field_block textarea{
    background-color:#000;
    }

    input[type=email]:focus, input[type=text]:focus, input[type=tel]:focus, textarea:focus {
    box-shadow: 0 0 5px #000!important;
    border: 1px solid #b11!important;
    outline: 0;
    }

Please sign in to leave a comment.