Improve focus highlight

The currently focused element (e.g. input field) is only hardly visible because the css files disable drawing of the outline. This is really bad for usability especially when using keyboard navigation (with the TAB key).
nextcloud · Nov 15, 2016 · b540259 · b540259
1 parent 150b86a
commit b540259
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/core/css/inputs.css b/core/css/inputs.css
@@ -34,9 +34,13 @@ input[type="button"],
 	background-color: #fff;
 	color: #333;
 	border: 1px solid #ddd;
-	outline: none;
 	border-radius: 3px;
 }
+
+:focus {
+	outline: #0082c9 auto ;
+}
+
 input[type="hidden"] {
 	height: 0;
 	width: 0;
@@ -213,7 +217,6 @@ select {
 	-moz-appearance: none;
 	appearance: none;
 	background: url('../../core/img/actions/triangle-s.svg') no-repeat right 8px center rgba(240, 240, 240, 0.90);
-	outline: 0;
 	padding-right: 24px !important;
 }
 
@@ -410,6 +413,12 @@ input[type="submit"] img, input[type="button"] img, button img, .button img { cu
 	box-shadow: none;
 }
 
+input[type="submit"]:focus, input[type="button"]:focus,
+button:focus, .button:focus
+ {
+	color: #0082c9;
+}
+
 /* disabled input fields and buttons */
 input:disabled, input:disabled:hover, input:disabled:focus,
 button:disabled, button:disabled:hover, button:disabled:focus,

diff --git a/core/css/styles.css b/core/css/styles.css
@@ -2,7 +2,7 @@
  This file is licensed under the Affero General Public License version 3 or later.
  See the COPYING-README file. */
 
-html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; cursor:default; }
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin:0; padding:0; border:0; font-weight:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; cursor:default; }
 html, body { height:100%; }
 article, aside, dialog, figure, footer, header, hgroup, nav, section { display:block; }
 body { line-height:1.5; }