Restyled select and input element to the spec images

Closes #5972

- Set -webkit-appearance:none
- Set the caret down SVG file (created by @bradleyrichter) as the background-image
- Set the outline inside the input element
- Set height:2rem to make the height consistent
- Moved properties in .form-control to the input and select element
- Removed box-shadow properties from the input and select element under .bookmarkForm
- Set specific properties to input in #navigator

The caret down SVG file will be replaced with the sprite PNG later (See #5891)

Auditors:

Test Plan:
1. Open about:preferences
2. Make sure the text entry fields with active edit state have the rectangle inside them
3. Make sure the drop down arrows are styled properly
4. Open another page in a new tab
5. Open the shield from the top right lion icon
6. Make sure the drop down arrows are styled properly
7. Bookmark about:preferences
8. Make sure the input and select elements are styled consistently on the bookmark dialog

less/about/preferences.less

@@ -367,13 +367,6 @@ span.settingsListCopy {
   }
 }
 
-input:not([type="checkbox"]), select {
-  &.form-control {
-    box-sizing: border-box;
-    width: 280px;
-  }
-}
-
 input[type="checkbox"][disabled] {
   opacity: 0.8;
   pointer-events: none;

less/forms.less

@@ -1,24 +1,60 @@
 @import "variables.less";
 
+@inputSelectPadding: 0.4em;
+
 input,
 select {
+  color: @darkGray;
+  font-size: 14.5px;
   box-sizing: border-box;
+  border-radius: @borderRadius;
+  outline: none;
+  padding: @inputSelectPadding;
+  height: 2rem;
+
+  &.form-control {
+    display: block;
+    background-color: #fff;
+  }
 }
 
-.form-control {
-  display: block;
-  background: white;
+select {
+  box-shadow: @selectBoxShadow;
   border: solid 1px @lightGray;
-  border-radius: @borderRadius;
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-  box-sizing: border-box;
-  color: @darkGray;
-  font-size: 14.5px;
-  height: 2.25em;
-  padding: 0.4em;
+  background: url('../app/extensions/brave/img/caret_down_grey.svg') calc(~'100% - @{inputSelectPadding}') 50% / contain no-repeat;
+  background-color: #fefefe;
+  -webkit-appearance: none;
+
+  &.form-control {
+    background-size: 12px 12px;
+  }
+}
+
+input {
+  box-shadow: @inputBoxShadow;
+  border: solid 1px @black20;
+
+  &:not([readonly]):focus {
+    outline-offset: -4px;
+    outline-color: -webkit-focus-ring-color;
+    outline-width: 1px;
+    outline-style: solid;
+  }
+}
+
+.form-control {
   width: 100%;
 }
 
+.prefBody {
+  input:not([type="checkbox"]),
+  select {
+    &.form-control {
+      width: 280px;
+    }
+  }
+}
+
 .flyoutDialog {
   background-color: @toolbarBackground;
   border-radius: @borderRadius;
@@ -610,26 +646,22 @@ select {
 
   input,
   select {
+    font-size: 1em;
     display: block;
     width: 100%;
     max-width: 250px;
-    height: 25px;
-    border-radius: 5px;
     padding: 0 5px;
-    margin: 5px 0 5px 0;
-    font-size: 0.9em;
-    border: solid 1px #ececec;
-    background: white;
-    color: #444444;
-    outline: none;
+    margin: 5px 0;
   }
 
   input {
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+    &:focus {
+      outline: none;
+    }
   }
 
   select {
-    box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.8);
+    background-size: 12px 12px;
   }
 }
 

less/navigationBar.less

@@ -849,6 +849,7 @@
       background: @navigationBarBackground;
       border: none;
       box-sizing: border-box;
+      box-shadow: none;
       color: @chromeText;
       cursor: text;
       flex-grow: 1;
@@ -857,6 +858,8 @@
       outline: none;
       text-overflow: ellipsis;
       min-width: 0%; // allow the navigator to shrink
+      padding: 0;
+      height: auto;
 
       &:hover {
         background: @chromeControlsBackground2;

less/variables.less

@@ -104,16 +104,18 @@
 @gray25: rgba(116, 116, 130, 0.25);
 @gray50: rgba(116, 116, 130, 0.5);
 @black10: rgba(0, 0, 0, 0.1);
+@black20: rgba(0, 0, 0, 0.2);
 @black25: rgba(0, 0, 0, 0.25);
 @black50: rgba(0, 0, 0, 0.5);
 @black75: rgba(0, 0, 0, 0.75);
 
 @buttonShadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.5);
 @dialogShadow: 0px 8px 22px 0px rgba(0, 0, 0, .5);
+@inputBoxShadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+@selectBoxShadow: -1px 1px 3px -1px @mediumGray;
 @softBoxShadow: 0 4px 8px @lightGray;
 @lightBoxShadow: 0 2px 2px @lightGray;
 @insetShadow: inset -5px 0 15px @black25;
-
 @orangeButtonShadow: 0 2px 0 @braveDarkOrange;
 
 @zindexWindowNotActive: 900;