Skip to content

Commit 99005eb

Browse files
LiamHDLiamHD
committed
Add focus highlight to radio buttons and checkboxes
Signed-off-by: Matthias Becker <becker.matthias@gmail.com>
1 parent 150b86a commit 99005eb

3 files changed

Lines changed: 64 additions & 0 deletions

File tree

‎apps/theming/lib/Controller/ThemingController.php‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -347,6 +347,15 @@ public function getStylesheet() {
347347
'opacity: 0.4;' .
348348
'color: '.$textColor.';'.
349349
"}\n";
350+
351+
$responseCss .= 'input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="time"]:focus, input[type="date"]:focus, textarea:focus, select:focus, button:focus, .button:focus, input[type="submit"]:focus, input[type="button"]:focus, #quota:focus, .pager li a:focus { '.
352+
' border: 1px solid ' . $color . ";" .
353+
"}\n";
354+
355+
$responseCss .= 'input[type="submit"]:focus, input[type="button"]:focus, select:focus, button:focus, .button:focus {' .
356+
' color: ' . $color. ';'.
357+
"}\n";
358+
350359
$responseCss .= '.ui-widget-header { border: 1px solid ' . $color . '; background: '. $color . '; color: #ffffff;' . "}\n";
351360
$responseCss .= '.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {' .
352361
'border: 1px solid ' . $color . ';' .

‎apps/theming/tests/Controller/ThemingControllerTest.php‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -456,6 +456,15 @@ public function testGetStylesheetWithOnlyColor() {
456456
'opacity: 0.4;' .
457457
'color: #ffffff;'.
458458
"}\n";
459+
460+
$expectedData .= 'input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="time"]:focus, input[type="date"]:focus, textarea:focus, select:focus, button:focus, .button:focus, input[type="submit"]:focus, input[type="button"]:focus, #quota:focus, .pager li a:focus { '.
461+
' border: 1px solid ' . $color . ";" .
462+
"}\n";
463+
464+
$expectedData .= 'input[type="submit"]:focus, input[type="button"]:focus, select:focus, button:focus, .button:focus {' .
465+
' color: ' . $color. ';'.
466+
"}\n";
467+
459468
$expectedData .= '.ui-widget-header { border: 1px solid ' . $color . '; background: '. $color . '; color: #ffffff;' . "}\n";
460469
$expectedData .= '.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {' .
461470
'border: 1px solid ' . $color . ';' .
@@ -544,6 +553,13 @@ public function testGetStylesheetWithOnlyColorInvert() {
544553
'opacity: 0.4;' .
545554
'color: #000000;'.
546555
"}\n";
556+
$expectedData .= 'input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="time"]:focus, input[type="date"]:focus, textarea:focus, select:focus, button:focus, .button:focus, input[type="submit"]:focus, input[type="button"]:focus, #quota:focus, .pager li a:focus { '.
557+
' border: 1px solid ' . $color . ";" .
558+
"}\n";
559+
560+
$expectedData .= 'input[type="submit"]:focus, input[type="button"]:focus, select:focus, button:focus, .button:focus {' .
561+
' color: ' . $color. ';'.
562+
"}\n";
547563
$expectedData .= '.ui-widget-header { border: 1px solid ' . $color . '; background: '. $color . '; color: #ffffff;' . "}\n";
548564
$expectedData .= '.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {' .
549565
'border: 1px solid ' . $color . ';' .
@@ -719,6 +735,13 @@ public function testGetStylesheetWithAllCombined() {
719735
'opacity: 0.4;' .
720736
'color: #ffffff;'.
721737
"}\n";
738+
$expectedData .= 'input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="time"]:focus, input[type="date"]:focus, textarea:focus, select:focus, button:focus, .button:focus, input[type="submit"]:focus, input[type="button"]:focus, #quota:focus, .pager li a:focus { '.
739+
' border: 1px solid ' . $color . ";" .
740+
"}\n";
741+
742+
$expectedData .= 'input[type="submit"]:focus, input[type="button"]:focus, select:focus, button:focus, .button:focus {' .
743+
' color: ' . $color. ';'.
744+
"}\n";
722745
$expectedData .= '.ui-widget-header { border: 1px solid ' . $color . '; background: '. $color . '; color: #ffffff;' . "}\n";
723746
$expectedData .= '.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {' .
724747
'border: 1px solid ' . $color . ';' .
@@ -824,6 +847,13 @@ public function testGetStylesheetWithAllCombinedInverted() {
824847
'opacity: 0.4;' .
825848
'color: #000000;'.
826849
"}\n";
850+
$expectedData .= 'input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="time"]:focus, input[type="date"]:focus, textarea:focus, select:focus, button:focus, .button:focus, input[type="submit"]:focus, input[type="button"]:focus, #quota:focus, .pager li a:focus { '.
851+
' border: 1px solid ' . $color . ";" .
852+
"}\n";
853+
854+
$expectedData .= 'input[type="submit"]:focus, input[type="button"]:focus, select:focus, button:focus, .button:focus {' .
855+
' color: ' . $color. ';'.
856+
"}\n";
827857
$expectedData .= '.ui-widget-header { border: 1px solid ' . $color . '; background: '. $color . '; color: #ffffff;' . "}\n";
828858
$expectedData .= '.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {' .
829859
'border: 1px solid ' . $color . ';' .

‎core/css/inputs.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,26 @@ textarea:hover, textarea:focus, textarea:active {
8181
opacity: 1;
8282
}
8383

84+
85+
input[type="text"]:focus,
86+
input[type="password"]:focus,
87+
input[type="search"]:focus,
88+
input[type="number"]:focus,
89+
input[type="email"]:focus,
90+
input[type="tel"]:focus,
91+
input[type="url"]:focus,
92+
input[type="time"]:focus,
93+
input[type="date"]:focus,
94+
textarea:focus,
95+
select:focus,
96+
button:focus, .button:focus,
97+
input[type="submit"]:focus,
98+
input[type="button"]:focus,
99+
#quota:focus,
100+
.pager li a:focus {
101+
border: 1px solid #0082c9;
102+
}
103+
84104
input[type="checkbox"].checkbox {
85105
position: absolute;
86106
left:-10000px;
@@ -410,6 +430,11 @@ input[type="submit"] img, input[type="button"] img, button img, .button img { cu
410430
box-shadow: none;
411431
}
412432

433+
input[type="submit"]:focus, input[type="button"]:focus, select:focus,
434+
button:focus, .button:focus {
435+
color: #0082c9;
436+
}
437+
413438
/* disabled input fields and buttons */
414439
input:disabled, input:disabled:hover, input:disabled:focus,
415440
button:disabled, button:disabled:hover, button:disabled:focus,

0 commit comments

Comments
 (0)