Replace yellow outline from focused searchbox with blue border. Replace yellow outlines with blue o…

chrome/browser/resources/file_manager/css/file_manager.css

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 html.col-resize * {
   cursor: col-resize !important;
 }
 
 /* Outer frame of the dialog. */
 body {
@@ skipping 447 matching lines @@
   background-position: 4px 4.5px;
   background-repeat: no-repeat;
   display: -webkit-box;
   height: 27px;
   margin-right: 10px;
   padding: 1px 6px 2px 23px;
   width: 150px;
 }
 
 #search-box:focus {
+  border-color: rgb(77, 144, 254);
+  outline: none;
   width: 240px;
 }
 
 #search-box,
 #filename-input-box input {
   border: 1px solid #BBB;
   border-radius: 2px;
 }
 
+#search-box::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  background-image: -webkit-image-set(
+    url('../images/files/ui/search_clear.png') 1x,
+    url('../images/files/ui/2x/search_clear.png') 2x);
+  height: 16px;

[Vladislav Kaznacheev, 2012/07/31 13:55:57]

it might be cleaner to set background-position: center instead of setting
width/height

[Oleg Eterevsky, 2012/07/31 14:10:46]

When I remove width/height this element disappears.

+  width: 16px;
+}
+
+#search-box::-webkit-search-cancel-button:hover {
+  background-image: -webkit-image-set(
+    url('../images/files/ui/search_clear_hover.png') 1x,
+    url('../images/files/ui/2x/search_clear_hover.png') 2x);
+}
+
+#search-box::-webkit-search-cancel-button:active {
+  background-image: -webkit-image-set(
+    url('../images/files/ui/search_clear_pressed.png') 1x,
+    url('../images/files/ui/2x/search_clear_pressed.png') 2x);
+}
+
 button#detail-view {
   background-image: -webkit-image-set(
     url('../images/files/ui/view_list_black.png') 1x,
     url('../images/files/ui/2x/view_list_black.png') 2x);
   background-position: center;
   background-repeat: no-repeat;
 }
 
 
 button#thumbnail-view {
@@ skipping 231 matching lines @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 /* Text box used for renaming in the detail list. */
 .table-row-cell input.rename {
   -webkit-margin-start: -3px;
   line-height: 20px;
 }
 
+input.rename:focus {
+  outline-color: rgb(77, 144, 254);
+}
+
 /* Elements that need to be LTR even in an RTL context, but should align
  * left. Display size in Hebrew is such a case.
  */
 html[dir='rtl'] .align-end-weakrtl {
   direction: ltr;
   text-align: left;
 }
 
 input.rename {
   font: inherit;
@@ skipping 669 matching lines @@
   width: 50%;
 }
 
 #list-container .table-header-inner {
   height: 100%;
 }
 
 #list-container .table-header-cell:hover {
   background-color: #f2f2f2;
 }
+
+button:focus {
+  outline-color: rgb(77, 144, 254);
+}