Remove focus from clicked button

#1

My client has bootstrap 4 css that has been butchered quite a bit.

When a button in my component is clicked (with wire:click) it stays focused which means it retains a bright blue background instead of showing the set or unset background colour that I want on the button.

Is there anyway that rendering the view can remove the browser focus on this element?

#2

Hey, @Snapey

What about this!

#3

what about it? can’t see how it can remove the focus state since ‘blur’ is not a class ?

#4 
.unfocus:focus, .unfocus:active {
  outline: none;
  box-shadow: none;
}

    <button wire:click="checkout" wire:loading.class="unfocus">
        Checkout
    </button>

Second Method:

<button class="btn btn-primary btn-block" onclick="this.blur();">...</button>

Maybe this link help you out:

2 Likes
#5

Thanks a lot. The blur on click worked out great.
focusblur

1 Like
#6

I’m Glade that I heard it from you!

Happy to help mate