There is a newer version of Luda.

Let's go!

Focus

Get a better focus effect in all browsers.

Introduction

The native focus behavior of browsers are wired and different. For better focus effect control, we use the .focus class instead of the :focus selector in Luda.

Except form elements, the .focus class will be added to a focusable element only when it’s focused through keyboard. For a form element, the .focus class will be added no matter how it’s focused.

Examples

This link will show an outline only when it’s focused through keyboard.

Focus me by pressing the tab key. 

<a href="#">Focus this link</a>

Button

This button will show an outline only when it’s focused through keyboard.

<button class="btn btn-primary">Focus me through keyboard</button>

Form

The border color of this text field will be changed no matter how the text field is focused.

<div class="fm fm-text">
  <input placeholder="A text filed">
</div>

HTML Attributes

data-focus-disabled

<html data-focus-disabled>...</html>

Add this attribute to the <html> tag to disable the enhancement to browser’s native focus behavior.