Streaming live at 10am (PST)

How to remove the outline when click button


#1

I just biginner with Webflow. I am creating http://mebauxinhdep.webflow.io .
When click the search button, it show a blue out line around the button.
How to set remove it?
Thank you!


Remove blue edge on button when pressed
#2

Oh, great question @phanvietdo!

To remove the blue outline on focus will require the following small amount of CSS:
.search-button:focus {
outline: none;
}

You can view the effects of the CSS addition in the following video:

Feel free to learn about adding custom code at the following Webflow University article: https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site

Also, you can learn more about the outline property in the following CSS-Tricks article: https://css-tricks.com/almanac/properties/o/outline/

Please note that you should add some form of proper fallback for accessibility: https://a11yproject.com/posts/never-remove-css-outlines/

Hopefully this helps :blush:

Best regards,
Micah :nerd_face:


#3

Thank you. Can you tell me how to put my custom css into project. I am newbie with Webflow.


#4

Oh definitely, @phanvietdo.

No problem.

The following Webflow University article explains it the best:

Hopefully this helps :blush:


#5

Awesome Ryan!
Thank you very much!


#6

@Port_of_Folio
I can do it now. Thank you all!


#7

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.