Exactly what the title says.
I put my own focused state styling, but blue lines still show up. I have no idea where they come from.
(Am talking about published website, not the lines that show in designer.)
hi @Laleesh the best way to get help is to follow the forum post guide that is pinned on top of each section, if you have missed it here they are.
When posting please:
- Required: Share your project’s Read-Only link AND live site’s Published link
- The read-only link is a special URL generated in the Dashboard to allow others to view your project in the Webflow Designer. How to get your project’s read-only link?
- The published link is the webflow.io subdomain where you can view the live site with custom code running. It is IMPORTANT to share this link, as custom code does not run in the Designer.
- Upload as many screenshots/screencast videos as possible to help others help you faster
- Add a description and/or post a link to a working example of what you’re trying to achieve
- Reply to users by tagging using the @ sign followed by their forum username like this:
hi @Laleesh you are asking for help on a live page but you do not provide a link! Please read the guide again and follow it with all other future requests on this forum.
To your question:
As you do not provide any screenshots I will presume you mean blue outline. This outline is added by the browser itself.
definition:
The blue outline on a guide is an accessibility feature that the browser uses to tell screen readers that the guide should be read first. It indicates that the guide is “selected” by the screen reader to read its contents.
You can find on the internet solution that says outline: none It is bad advice. the outline should be kept and it can be modified.
example:
.my-element:focus{
outline: 0;
}
but even changing outline to 0 is not the best practice as you breaking accessibility rules. The best way is to only change its color and width the way which will accomplish your design. For more info feel free to search the internet on how to modify the focus outline.
Hope this solves your request.
1 Like
That would work, but I have an outline of my own set up. Would that code remove a a my styling as well?
hi @Laleesh I do not understand what you call your own set-up as you do not provide links and more detailed pieces of information. Again!!!
example to start with:
.my-class{
outline: 2px solid transparent;
outline-offset: 2px;
}
I just made a quick example to understand applied principles. If you would like to modify the outline more, read MDN docs.
PS: please read the guide and start using @ symbol to be notified about a new response.
Hey, I’m sorry for replying this late, I wasn’t checking back and there’s no notifications, or anything here. Am also sorry for not providing additional info, tought it could be solved without it.
See how there’s both white and a blue outline? Blue is the default one which I want gone, and the white one is the one I’ve set.
hi @Laleesh I was able replicate it ONLY in old Safari 15.6.1 on live page. All other browsers (old Firefox, Chrome) displayed it correctly. The only way I could display it correctly in old Safari was not to use WF UI outline on focus and use custom CSS only. I was not able to replicate the issue on the newest version of any browser.
This was a Safari bug that was fixed in version 16+ (I think).
Please check your notification setting
I’m using the newest Chrome browser…