When we press tab key on Spartacus page, there will be a focus state border displaying which wraps the control being focused. The border is drawn as light blue color.
Question
Is this behavior implemented by some coding inside Spartacus, or provided by Angular out of the box? My assumption is, at least, it's not the browser's default behavior.
I created a simple HTML page:
<html>
<head>
<style>
button {
padding: 1px;
margin: 5px;
}
</style>
</head>
<body>
<div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
</body>
</html>
And the focus border color is black:
Answer
Its a bit of a mix between Spartacus and default html. Usually, that border box will appear over any focused html element by default. But as we build more complex apps with angular for example, we can end up losing this default border box due to some way we've styled an element or have veered from default browser behaviour. In Spartacus's instance, we have implemented a border box in css to make sure we can see this focused element that is a little more robust and themed so it works with more of our custom elements
更多Jerry的原创文章，尽在："汪子熙":
网友评论