How do I remove the pink/red border overlay on selected elements in Webflow?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To remove the pink/red border overlay on selected elements in Webflow, follow these steps:

Identify the element: Determine which element on your webpage has the pink/red border overlay that you want to remove. This could be a button, link, form input, or any other interactive element.
Access the Styles panel: In the Webflow Designer, open the Styles panel by clicking on the paintbrush icon on the left-hand sidebar.
Select the element: Either click directly on the element in the Designer canvas or locate the element in the Navigator panel and click on it to select it.
Disable the focus state: The pink/red border overlay appears when an element is in focus, typically after being clicked. To remove this overlay, you need to customize the focus state.

In the Styles panel, scroll down to the "States" section.
Locate the "Focus" state and click on it to access the focus settings.

Remove the border overlay:

Look for the "Border" property under the focus state settings.
Set the border width to 0px or remove the border color by selecting the transparent color option (usually represented as an empty color swatch).

Check the result: Preview your changes in the Designer by clicking the eye icon at the top-right corner. If the pink/red border overlay is no longer present when selecting the element, you have successfully removed it.
Publish your site: Don't forget to publish your website for the changes to take effect on the live site.

By following these steps, you should be able to remove the pink/red border overlay on selected elements in Webflow, providing a cleaner and more customized visual experience for your users.

Additional Questions:

How do I customize the border style of a selected element in Webflow?
Can I change the color of the border overlay on selected elements in Webflow?
What other states can be customized in Webflow, besides the focus state?

What are some suggestions to fix a Flex Box layout issue in Safari that stretches profile images in a Webflow grid?

How can I create an image tag in Webflow that behaves similar to a background image set to cover, covering the full width and height of the container on different screen sizes?

How can I fix the issue where the transparent Navbar with a dropdown I'm building in Webflow is not pushing down the rest of the page content on mobile?

How do I change the icon color in the hover state of a button in Webflow?

Is it possible to add a shadow to a PNG or SVG image in Webflow so that the shadow is in the form of the image itself, rather than a square around it?

How can I hide a specific element from Safari using CSS in Webflow?

How can I apply a drop shadow specifically to a background image in Webflow?

Is it possible to add custom CSS code to a Webflow site in order to use the vertical-align property?

What can I do to fix the issue with the background image causing a lack of smooth scrolling on Chrome and Safari in Webflow?

What are the design rules for using VW and VH units in Webflow, and are there any special cases where they should be mixed? What units should be used for fonts and button sizes in Webflow?