jquery on focus change background color AND onfocus select all text OR input text select all on focus

In the previous post i had shown how to select All text of the control and continuing the post now i will show change border color of the focused control as shown below.........
and this works for textbox, dropdownlist, listbox, textarea ...

Out Put :

 CSS for for color :

 Place this CSS in a *.CSS file

 

textarea:focus, 

input[type="text"]:focus, 

input[type="password"]:focus, 

input[type="datetime"]:focus, 

input[type="datetime-local"]:focus,

input[type="date"]:focus, 

input[type="month"]:focus, 

input[type="time"]:focus, 

input[type="week"]:focus, 

input[type="number"]:focus, 

input[type="email"]:focus, 

input[type="url"]:focus, 

input[type="search"]:focus, 

input[type="tel"]:focus, 

input[type="color"]:focus, 

.uneditable-input:focus

{

    border-color: rgba(255, 17, 0, 0.8);

    outline: 0;

    outline: thin dotted \9; /* IE6-9 */

    /*-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);

    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);

    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);*/

    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 0, 0, 0.6);

    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 0, 0, 0.6);

    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 0, 0, 0.6);

}

textarea,

input[type="text"],

input[type="password"],

input[type="datetime"],

input[type="datetime-local"],

input[type="date"],

input[type="month"],

input[type="time"],

input[type="week"],

input[type="number"],

input[type="email"],

input[type="url"],

input[type="search"],

input[type="tel"],

input[type="color"],

.uneditable-input {

  background-color: #ffffff;

  border: 1px solid #cccccc;

  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;

     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;

       -o-transition: border linear 0.2s, box-shadow linear 0.2s;

          transition: border linear 0.2s, box-shadow linear 0.2s;

}

select,

textarea,

input[type="text"],

input[type="password"],

input[type="datetime"],

input[type="datetime-local"],

input[type="date"],

input[type="month"],

input[type="time"],

input[type="week"],

input[type="number"],

input[type="email"],

input[type="url"],

input[type="search"],

input[type="tel"],

input[type="color"],

.uneditable-input {

  display: inline-block;

  height: 20px;

  padding: 4px 6px;

  margin-bottom: 10px;

  font-size: 14px;

  line-height: 20px;

  color: #555555;

  vertical-align: middle;

  -webkit-border-radius: 4px;

     -moz-border-radius: 4px;

          border-radius: 4px;

}

and the script U required is 

    <script type="text/javascript">

        $(document).ready(function () {

            $('INPUT[type="text"]').focus(function () {

                $(this).addClass("focus");

            });

            $('INPUT[type="text"]').blur(function () {

                $(this).removeClass("focus");

            });

            $('SELECT, TEXTAREA').focus(function () {

                $(this).addClass("focus");

            });

            $('SELECT, TEXTAREA').blur(function () {

                $(this).removeClass("focus");

            });

        });

    </script>