How can I stop the default blue transparent box from appearing when I click on links on mobile and tablet devices on my Webflow website?

Published on
September 22, 2023

To stop the default blue transparent box from appearing when you click on links on mobile and tablet devices on your Webflow website, you can use CSS to customize the styling of links. Here's how you can achieve this:

  1. Select the element that contains the link you want to modify. This could be a text link, a button, or any other element that has a link attached to it.

  2. Open the styles panel and scroll down to the typography section.

  3. Find the "Text Link" section and click on the link settings.

  4. In the link settings, you'll see a dropdown menu called "States". Click on it and select "All States".

  5. In the "All States" section, you'll find an option called "Focus". This is the state that gets triggered when you click on a link.

  6. Expanding the "Focus" section will display the styles that are applied to the link when it's in focus. By default, Webflow adds a blue transparent box around the link in this state.

  7. To remove this default styling, you can set the "Focus" state to have the same styles as the "Normal" state. You can do this by clicking on the small copy icon next to the "Normal" state styles.

  8. Once you've copied the "Normal" state styles to the "Focus" state, you can modify its properties as desired. For example, you can change the background color, border properties, or padding to match your website's design.

  9. Make sure to preview your changes on mobile and tablet devices to ensure that the default blue transparent box no longer appears when you click on links.

By customizing the link styles on your Webflow website, you can remove the default blue transparent box that appears when clicking on links on mobile and tablet devices, providing a more cohesive and visually pleasing experience for your users.

Additional questions:

  1. How do I customize link hover effects in Webflow?
  2. Can I change the color of visited links on my Webflow website?
  3. Is it possible to create interactive image maps in Webflow?