Better focus styles for form elements in the admin. These are purposefully not keyed to admin color schemes, as different colors could communicate a state like an error as opposed to focus. props celloexpressions. fixes #27173.

Built from https://develop.svn.wordpress.org/trunk@27741


git-svn-id: http://core.svn.wordpress.org/trunk@27578 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/forms-rtl.css

@@ -35,6 +35,8 @@ input[type="radio"] {
 	box-sizing: border-box;
 	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+	-webkit-transition: .05s border-color ease-in-out;
+	transition: .05s border-color ease-in-out;
 }
 
 input[type="radio"]:checked + label:before {
@@ -214,16 +216,14 @@ select {
 	box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
 	background-color: #fff;
 	color: #333;
+	-webkit-transition: .05s border-color ease-in-out;
+	transition: .05s border-color ease-in-out;
 }
 
 select[disabled] {
 	color: #7f7f7f;
 }
 
-select:focus {
-	border-color: #aaa;
-}
-
 textarea:focus,
 input[type="text"]:focus,
 input[type="password"]:focus,
@@ -235,9 +235,9 @@ input[type="url"]:focus,
 input[type="checkbox"]:focus,
 input[type="radio"]:focus,
 select:focus {
-	border-color: #999;
+	border-color: #5b9dd9;
-	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+	-webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8);
-	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+	box-shadow: 0 0 2px rgba(30,140,190,0.8);
 }
 
 input[readonly] {

wp-admin/css/forms.css

@@ -35,6 +35,8 @@ input[type="radio"] {
 	box-sizing: border-box;
 	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
+	-webkit-transition: .05s border-color ease-in-out;
+	transition: .05s border-color ease-in-out;
 }
 
 input[type="radio"]:checked + label:before {
@@ -214,16 +216,14 @@ select {
 	box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
 	background-color: #fff;
 	color: #333;
+	-webkit-transition: .05s border-color ease-in-out;
+	transition: .05s border-color ease-in-out;
 }
 
 select[disabled] {
 	color: #7f7f7f;
 }
 
-select:focus {
-	border-color: #aaa;
-}
-
 textarea:focus,
 input[type="text"]:focus,
 input[type="password"]:focus,
@@ -235,9 +235,9 @@ input[type="url"]:focus,
 input[type="checkbox"]:focus,
 input[type="radio"]:focus,
 select:focus {
-	border-color: #999;
+	border-color: #5b9dd9;
-	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+	-webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8);
-	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+	box-shadow: 0 0 2px rgba(30,140,190,0.8);
 }
 
 input[readonly] {