Styled select input

Author: mrin9

src/components/api-request.js

@@ -515,7 +515,7 @@ export default class ApiRequest extends LitElement {
     return html`
     <div style="display:flex; align-items: center; margin:16px 0; font-size:var(--font-size-small);">
       <div style="display:flex; flex-direction:column; margin:0; width:calc(100% - 60px);">
-        <div style="display:flex;flex-direction:row;overflow:hidden;"> 
+        <div style="display:flex; flex-direction:row; align-items:center; overflow:hidden;"> 
           <div style="font-weight:bold;padding-right:5px;">API SERVER: </div> 
           ${containerServer}
         </div>
@@ -532,7 +532,7 @@ export default class ApiRequest extends LitElement {
           }
         </div>
       </div>
-      <button class="m-btn primary try-btn" style="padding: 6px 0px;width:60px" @click="${this.onTryClick}">TRY</button>
+      <button class="m-btn primary try-btn" style="padding: 6px 0px;width:60px; align-self:flex-end;" @click="${this.onTryClick}">TRY</button>
     </div>
     ${this.responseMessage === ''
       ? ''

src/styles/input-styles.js

@@ -62,6 +62,17 @@ input[type="password"] {
   box-sizing: border-box;
 }
 
+select {
+  padding: 6px 35px 6px 5px;
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%3E%3Cpath%20d%3D%22M10.3%203.3L6%207.6%201.7%203.3A1%201%200%2000.3%204.7l5%205a1%201%200%20001.4%200l5-5a1%201%200%2010-1.4-1.4z%22%20fill%3D%22%23777777%22%2F%3E%3C%2Fsvg%3E");
+  background-position: calc(100% - 5px) center;
+  background-repeat: no-repeat;  
+  background-size: 10px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
 textarea.mono,
 input[type="text"].mono,
 input[type="password"].mono{