[Forms] multiple fields time input UI should not have two focus ring.
https://bugs.webkit.org/show_bug.cgi?id=94579
Reviewed by Hajime Morita.
Source/WebCore:
This patch adds CSS selectors to override focus style for multiple
fields time input UI.
No new tests. fast/forms/time-multiple-fields/time-multiple-fields-appearance-basic.html
is updated for including focus state appearance.
* css/html.css:
(input::-webkit-datetime-edit-ampm-field:focus): Override default focus appearance.
(input::-webkit-datetime-edit-hour-field:focus): ditto
(input::-webkit-datetime-edit-millisecond-field:focus): ditto
(input::-webkit-datetime-edit-minute-field:focus): ditto
(input::-webkit-datetime-edit-second-field:focus): ditto
LayoutTests:
This patch adds a test case of focus appearance multiple fields time
input UI.
* fast/forms/time-multiple-fields/time-multiple-fields-appearance-basic-expected.html: Added script to make focus appearance.
* fast/forms/time-multiple-fields/time-multiple-fields-appearance-basic.html: Added script to set focus to input element.
git-svn-id: svn://svn.chromium.org/blink/trunk@126250 bbb929c8-8fbe-4397-9dbb-9b2b20218538
diff --git a/Source/WebCore/css/html.css b/Source/WebCore/css/html.css
index d60ca0e..c213d38 100644
--- a/Source/WebCore/css/html.css
+++ b/Source/WebCore/css/html.css
@@ -530,6 +530,17 @@
padding: 0.15em;
}
+/* Remove focus ring from fields and use highlight color */
+input::-webkit-datetime-edit-ampm-field:focus,
+input::-webkit-datetime-edit-hour-field:focus,
+input::-webkit-datetime-edit-millisecond-fiel:focus,
+input::-webkit-datetime-edit-minute-field:focus,
+input::-webkit-datetime-edit-second-field:focus {
+ background-color: highlight;
+ color: highlighttext;
+ outline: none;
+}
+
/* This selector is used when step >= 60 second but format contains second field. */
input::-webkit-datetime-edit-second-field[readonly] {
color: GrayText;
