Show delete button in input[type=search] only if the field is editable and focused/hovered.
Also, we show/hide the button with CSS opacity property instead of CSS
visibility property when the value emptiness is changed. This helps Web
authors to add CSS transition.
BUG=325496
TEST=automated.
Review URL: https://codereview.chromium.org/100823012
git-svn-id: svn://svn.chromium.org/blink/trunk@163512 bbb929c8-8fbe-4397-9dbb-9b2b20218538
diff --git a/Source/core/css/html.css b/Source/core/css/html.css
index 5237586..af23edc 100644
--- a/Source/core/css/html.css
+++ b/Source/core/css/html.css
@@ -456,6 +456,13 @@
flex: none;
-webkit-user-modify: read-only !important;
-webkit-margin-start: 1px;
+ opacity: 0;
+ pointer-events: none;
+}
+
+input[type="search"]:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-search-cancel-button {
+ opacity: 1;
+ pointer-events: auto;
}
input[type="search"]::-webkit-search-decoration {
