Removing Focus Border Outline in Elementor pro Text Input Boxes (Accessible Approach)
Methods:
1. Custom CSS (Recommended):
In your Elementor editor, navigate to the page where you have the form with text input boxes.
Click on the form widget (or the specific input field you want to modify).
In the settings panel on the left, go to the "Advanced" tab.
Look for the "Custom CSS" section.
Paste the following CSS code:
This code targets the .elementor-field-group .elementor-field-textual class, which applies to most text input boxes in Elementor forms.
The outline: none; property removes the default browser outline.
The optional border and box-shadow properties provide a subtle visual cue to indicate focus while maintaining accessibility.
2. Elementor Form Settings (Limited Scope):
If you only want to modify the focus border for a specific form, you can try using Elementor's built-in settings. However, this approach has limitations and might not work consistently across different input types.
Edit the form in Elementor.
Click on the form widget.
Go to the "Advanced" tab in the settings panel.
Under "Form Style," look for an option related to "Focus Border" or "Outline."
If available, adjust the settings to your preference.
Important Considerations:
Accessibility: While removing the default browser outline can be visually appealing, it's important to consider accessibility. Users who navigate websites with keyboards rely on visual cues to understand which element is currently in focus. The provided CSS code offers optional styling to provide a subtle indication while removing the heavy outline.
Specificity: The CSS selector used in the first method targets a broad class. If you encounter conflicts with other styles, you might need to adjust the selector to be more specific (e.g., target a specific form ID or input type).
.elementor-field-group .elementor-field-textual:focus {
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0%) !important;
}
.elementor-field-group .elementor-field-textual:focus {
outline: none; /* Removes default browser outline */
border: 1px solid #ddd; /* Optional subtle border for focus indication */
}