What is the required CSS3 or jQuery for this?

Problem

I have a span here and at the moment there is no border.

<span> My Span </span>

When a user clicks on the span, a blue border appears around the span, and then the border slowly disappears over 1 second

The following is my CSS

span
{
    margin : 20px;
    min-width: 150px;
    border-radius:5px;  //rounds corners for other browsers
    color:white;
    font-weight:bold;
    background-color:WHITE;
    padding:10px;


-webkit-transition: background-color 1s ease;
-moz-transition: background-color 1s ease;
transition: background-color 1s ease;

}

span a:click 
{
background-color: BLUE;
}

Thank you, CSS3 experts on Stack Overflow!

Problem courtesy of: KershawRocks

Solution

If you are looking to fade a border, you can use jquery and css: http://jsfiddle.net/qw0jq6th/1/

Jquery:

$('span').click(function () {
    $(this).addClass("blue").delay(1000).queue(function (next) {
        $(this).css('border', '1px solid transparent');
        $(this).removeClass("blue");
        next();
    });
});

CSS:

span {
    margin : 20px;
    min-width: 150px;
    border-radius:5px;
    font-weight:bold;
    padding:10px;
    -webkit-transition: all 1s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all 1s ease;
}
.blue {
    border: 1px solid blue !important;
}
Solution courtesy of: Derek Story

Discussion

use :active

span:active{
background-color: BLUE;
}

DEMO here

Discussion courtesy of: Ashish Balchandani

Firstly, you need your CSS to target 'span', not 'span a' as the span element does not contain a child 'a'

As mentioned by Ashish, you need to use :active

I think you're trying to change the border, not the background. You can use transition for this.

     transition : border 1s ease; 
      -webkit-transition : border 1s ease; 
      -moz-transition : border 1s ease;
      -o-transition : border 1s ease; 
}
    span:active{
    border: 5px solid blue;
}

Look here: http://jsfiddle.net/doqundnp/

The transition is only active whilst the mouse button is down.

Discussion courtesy of: Joshua Griffiths

This recipe can be found in it's original form on Stack Over Flow.