Add a virtual keyboard webui at chrome://keyboard/

ui/keyboard/resources/main.css

+/*
+ Copyright (c) 2013 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.
+*/
+
+body {
+  -webkit-user-select: none;
+  color: white;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+div.main {
+  -webkit-box-orient: vertical;
+  background: -webkit-linear-gradient(#bababa, #868686) no-repeat;
+  display: -webkit-box;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: -10px;
+}
+
+div.keyboard {
+  -webkit-box-flex: 1;
+  display: -webkit-box;
+  margin: 0 auto;
+  text-align: center;
+}
+
+div.rows {
+  -webkit-box-flex: 1;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  margin-bottom: 5px;
+  text-align: center;
+}
+
+div.row {
+  -webkit-box-flex: 1;
+  display: -webkit-box;
+  margin-right: 5px;
+  margin-top: 5px;
+}
+
+div.row > div {
+  -webkit-box-flex: 1;
+  display: -webkit-box;
+}
+
+.panel {
+  border: 0;
+  clear: both;
+  margin-left: 5px;
+  text-align: left;
+}
+
+.backspace > div {
+  background-image: url('images/del.svg');
+}
+
+.tab > div {
+  background-image: url('images/tab.svg');
+}
+
+.return > div {
+  background-image: url('images/ret.svg');
+}
+
+.mic > div {
+  background-image: url('images/mic.svg');
+}
+
+.button {
+  background: -webkit-linear-gradient(rgb(90, 97, 111), rgb(80, 86, 98));
+}
+.button:active {
+  background: -webkit-linear-gradient(rgb(80, 86, 98), rgb(90, 97, 111));
+}
+
+.auxiliary:active {
+  background: -webkit-linear-gradient(rgb(90, 97, 111), rgb(80, 86, 98));
+}
+
+.key {
+  -webkit-box-flex: 1;
+  background: -webkit-linear-gradient(#fff, #cacaca);
+  border: 1px solid transparent;
+  border-radius: 6px;
+  /* Reserving equivalent space to .key:active so
+     keys don't shift when selected. */
+  /* Do not use box shadow until performance improves
+   * http://code.google.com/p/chromium/issues/detail?id=99045
+  box-shadow: 0px 1px 1px #000;
+  */
+  color: #535353;
+  display: -webkit-box;
+  font-family: sans-serif;
+  font-weight: 100;
+  margin-left: 5px;
+  position: relative;
+}
+
+.key > div {
+  bottom: 0;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.key:active {
+  background: -webkit-linear-gradient(#d6d6d6, #acacac);
+  border: 1px solid rgba(125,125,125,0.5);
+  /* Do not use box shadow until performance improves
+   * http://code.google.com/p/chromium/issues/detail?id=99045
+  box-shadow: 0px 0px 15px #fff;
+  */
+}
+
+div.moddown {
+  background: -webkit-linear-gradient(#d6d6d6, #acacac);
+  border-color: rgb(48, 74, 155);
+}
+
+.image-key {
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 100%;
+  width: 100%;
+}
+
+.text-key {
+  height: 1.2em;
+}
+
+
+.shift > div.image-key {
+  background-image: url('images/shift.svg');
+}
+
+.moddown.shift > div.image-key {
+  background-image: url('images/shift-down.svg');
+}
+
+.hide > div {
+  background-image: url('images/keyboard.svg');
+}
+
+.at,
+.tab,
+.com,
+.comma,
+.hide,
+.mic,
+.period {
+  -webkit-box-flex: 1.3;
+}
+
+.symbol {
+  -webkit-box-flex: 1.4;
+}
+
+.return {
+  -webkit-box-flex: 1.5;
+}
+
+.backspace {
+  -webkit-box-flex: 1.6;
+}
+
+.left-shift {
+  -webkit-box-flex: 1.8;
+}
+
+.right-shift {
+  -webkit-box-flex: 2.0;
+}
+
+.space {
+  -webkit-box-flex: 4.8;
+}
+
+.bar {
+  -webkit-box-flex: 0.6;
+}
+
+.nodisplay {
+  display: none;
+}