2

I am building a sample project for one of my Blazor Nuget packages, and I ran into an issue I usually only see in Windows Forms type projects.

After clicking an arrow button, the button has a border:

enter image description here

In a Windows Form world, I would set focus to an offscreen Text Box or control.

If there is a CSS setting for after clicked, maybe that will do the trick, or if someone knows a way to clear the focus from the button?

My button is just a simple button:

<button class="nextbutton" @onclick="NextButton_Click"></button>

And the css for nextbutton:

.nextbutton 
{
    display: inline-block;
    border: none;
    width: 52px;
    height: 64px;
    background-image: url('../images/buttons/bluearrowright.png');
    background-color: transparent;
    transform: scale(0.75);
    transform-origin: left;
}

Thanks in advance if there is a CSS trick, or a way to just set focus to something off screen I would be ok with that if you showed me the JavaScript.

1 Answers1

2

Here is the source of my answer. I already upvoted here.

How to remove focus around buttons on click

.nextbutton:focus 
{
  outline: none;
}

I did search before I posted, but I searched more while I was waiting for an answer and found the above post. Worked perfect.