Search code examples
javascripthtmlcssfocus

How to use focus on image css?

I am using following code,

<style>
#img1 {width: 300px;}
#img1:focus {border: 2px solid green;}
</style>
<img id="img1" src="test.jpg"/>

But, on clicking image - focus is not working. Image remains same. Green border is not appearing why ?

Solution

  • An image is not natively focusable. You can add the attribute tabindex to make it focusable (and change #img:focus ... to #img1:focus ..., as pointed out by Jaromanda X):

    <style>
    #img1 {width: 300px;}
    #img1:focus {border: 2px solid green;}
</style>
<img id="img1" src="test.jpg" tabindex="0" />