jquery.ajax-combobox/sample/sample.css

jQuery plugin to create a text box which can auto-complete and pull-down-select.

body {
  background-color: #eee;
  -webkit-text-size-adjust: 100%;
}
.main {
  position: relative;
}
footer {
  background: #eee;
}
footer div {
  padding: 16px 0;
  text-align: right;
}

article form a.btn,
article form input,
article form button {
  margin-bottom: 4px;
}
.green {
  color: #5cb85c;
}
.red {
  color: #d9534f;
}
.btn-container {
  margin-bottom: 1.2em;
}

/**
 * 見出し横に表示される、自身へのリンク
 */
.js-anchor {
  font-size: 1em;
  left: 4px;
  position: absolute;
  visibility: hidden;
}
.card-header:hover .js-anchor {
  visibility: visible;
}
.js-anchor,
.js-anchor:hover,
.js-anchor:active {
  color: inherit;
}
.octicon {
  display: inline-block;
  fill: currentColor;
  height: 1.4em;
  vertical-align: text-bottom;
}
pre {
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 2px;
  font-size: 0.9rem;
  line-height: 1.2;
  margin-bottom: 1em;
  padding: 0.5em;
}

.toc,
.toc .btn {
  font-size: 0.95rem;
}


/**
 * Override Bootstrap4
 */
a,
a:active {
  color: #486;
}
a:hover,
a:focus {
  color: #375;
}
h5 {
  font-weight: normal;
}
h6 {
  color: #777;
  font-size: 14px;
}
.jumbotron {
  background-color: #486;
  background-image: linear-gradient(30deg, #3d8260 12%, transparent 12.5%, transparent 87%, #3d8260 87.5%, #3d8260),
  linear-gradient(150deg, #3d8260 12%, transparent 12.5%, transparent 87%, #3d8260 87.5%, #3d8260),
  linear-gradient(30deg, #3d8260 12%, transparent 12.5%, transparent 87%, #3d8260 87.5%, #3d8260),
  linear-gradient(150deg, #3d8260 12%, transparent 12.5%, transparent 87%, #3d8260 87.5%, #3d8260),
  linear-gradient(60deg, #4a8e6c 25%, transparent 25.5%, transparent 75%, #4a8e6c 75%, #4a8e6c),
  linear-gradient(60deg, #4a8e6c 25%, transparent 25.5%, transparent 75%, #4a8e6c 75%, #4a8e6c);
  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
  background-size: 80px 140px;
  color: #fff;
  text-shadow: 0 1px 1px #333;
}
.page-title {
  font-family: Arial;
}
.jumbotron-link,
.jumbotron-link:hover {
  color: inherit;
}
.list-group-item:first-child {
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.list-group-item:last-child {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}
.card {
  margin-bottom: 1.5em;
}
.card > .card-header {
  background-color: #777;
  border-color: #777;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  color: #fff;
}
.btn-primary {
  background-color: #597;
  border-color: #509472;
}
.btn-primary:disabled,
.btn-primary:disabled:focus,
.btn-primary:disabled:hover {
  background-color: #597;
  border-color: #509472;
}
.btn-primary:hover {
  background-color: #486;
  border-color: #3f8361;
}
.btn-primary:not([disabled]):not(.disabled).active,
.btn-primary:not([disabled]):not(.disabled):active,
.show > .btn-primary.dropdown-toggle,
.btn-primary:active,
.btn-primary:active:hover,
.btn-primary:active:focus,
.btn-primary:focus {
  background-color: #375;
  border-color: #2d7250;
}
.btn-primary:not([disabled]):not(.disabled).active,
.btn-primary:not([disabled]):not(.disabled):active,
.show > .btn-primary.dropdown-toggle,
.btn-primary.focus,
.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem #6a8;
  color: #fff;
}
.list-group-item-action {
  outline: #fff none 0;
}
.list-group-item-action:focus,
.list-group-item-action:hover,
.list-group-item-action:active {
  background-color: #eee;
}

/* ONLY ajax-combobox */
body {
  padding-top: 3.5rem; /* for Bootstrap navbar */
}