Green/White Border Around Focus Field in Forms

[JLittle2]

I've been writing css to style my forms and have run into this same issue on multiple accounts/sites. No matter what I do, a green/white border appears on any field I click. Here's the portion of one of my css files that deals with focus fields (attempting to set the focus border color electric yellow):

.hbspt-form input:focus, .hbspt-form textarea:focus{

    background-color: #000;

    border: 1px solid;

    border-color: #F6FF01 !important;

}

and here is a link to one of our pages that has a form embedded: https://www.pollen-electric.com/

Anyone know of any other classes hubspot might use to set the border color of a focused field? Or have any other ideas?

[Khanzain]

The issue you're encountering with the green/white border appearing around focused fields in your forms is likely due to conflicting CSS styles. To resolve this, you can follow these steps:

1. Inspect the Element: Use your browser's developer tools to inspect the form field that's displaying the green/white border. This will help you identify the specific CSS styles being applied to the field.

2. Override the Default Styles: Once you've identified the default styles causing the issue, you can override them with your own custom CSS. In your case, you're already attempting to do this with the following CSS rule:

.hbspt-form input:focus, .hbspt-form textarea:focus{
    background-color: #000;
    border: 1px solid;
    border-color: #F6FF01 !important;
}

However, it seems that this rule is not completely overriding HubSpot's default styles. To ensure your styles take precedence, you may need to be more specific in your CSS selector or use the `!important` declaration for each property.

3. Use Specific CSS Selectors: Instead of targeting all `input` and `textarea` elements within the `.hbspt-form` class, try using more specific selectors that target only the elements you want to style. For example:

.hbspt-form .hs-input:focus, .hbspt-form .hs-textarea:focus {
    background-color: #000 !important;
    border-color: #F6FF01 !important;
}

By targeting the specific classes `.hs-input` and `.hs-textarea` within the `.hbspt-form` class, you can ensure that your styles are applied only to those elements.

4. Test Your Changes: After making these changes, test your form fields again to see if the green/white border issue has been resolved. If not, you may need to further refine your CSS selectors or adjust your styles.

5. Consider Browser Compatibility: Keep in mind that CSS styles can behave differently across different browsers. Make sure to test your form fields in multiple browsers to ensure consistent styling.

By following these steps and refining your CSS styles, you should be able to resolve the issue with the green/white border around focused fields in your forms, For better understanding below are the links to the finest learning platforms 1. W3 School 2. Iqra Technology 3. JavaPoint

[evaldas · Accepted solution]

Hi @JLittle2 

You should be able to change that by adding a rule for :focus-visible pseudo-class and setting the outline + border color there.

For example, this code:

.hbspt-form .input input:focus-visible {
    outline: 2px solid #3ce041;
    border: 1px solid #f913f9;
}

Will make the field appear like this:

Obviously customize the color hex codes to your liking 🙂

Hope this helps!