Is it possible to remove the focus state (Blue Box) around the close button in the lightbox on iOS Safari in Webflow?

Published on
September 22, 2023

Yes, it is possible to remove the focus state (blue box) around the close button in the lightbox on iOS Safari in Webflow. Here's how you can do it:

  1. Open your Webflow project and go to the page where the lightbox is located.
  2. Select the lightbox element by clicking on it in the Designer.
  3. In the right-hand sidebar, click on the "Settings" tab for the lightbox.
  4. Scroll down until you see the "Styles" section and click on the "Open" button to expand it.
  5. Click on the "Open" state in the dropdown menu to access the styling options for the lightbox when it is open.
  6. In the expanded settings panel, you will see the "Style" section where you can modify the appearance of the lightbox.
  7. To remove the focus state (blue box) around the close button, you will need to add some custom CSS code.
  8. In the "Style" section, click on the plus button to add a new CSS rule.
  9. In the CSS rule field, enter the following code:
.lightbox-close:focus {  box-shadow: none !important;  outline: none !important;}
  1. This CSS code will remove the box-shadow and outline properties for the close button when it is in focus.
  2. Click on the "Save" button to apply the changes to the lightbox.

By following these steps, you will be able to remove the focus state (blue box) around the close button in the lightbox on iOS Safari in Webflow.

Additional questions:

  1. How do I customize the appearance of the lightbox in Webflow?
  2. Can I add custom animations to the lightbox in Webflow?
  3. How can I change the transition speed of the lightbox in Webflow?