Huguet57 | ae7b4c2 | 2018-07-23 01:08:23 +0200 | [diff] [blame] | 1 | * {
|
| 2 | box-sizing: border-box;
|
| 3 | }
|
| 4 |
|
| 5 | .autocomplete {
|
| 6 | /*the container must be positioned relative:*/
|
| 7 | position: relative;
|
| 8 | display: inline-block;
|
| 9 | }
|
| 10 | input {
|
| 11 | border: 1px solid transparent;
|
| 12 | background-color: #f1f1f1;
|
| 13 | padding: 10px;
|
| 14 | font-size: 16px;
|
| 15 | }
|
| 16 | input[type=text] {
|
| 17 | background-color: #f1f1f1;
|
| 18 | width: 100%;
|
| 19 | }
|
| 20 | input[type=submit] {
|
| 21 | background-color: DodgerBlue;
|
| 22 | color: #fff;
|
| 23 | cursor: pointer;
|
| 24 | }
|
| 25 | .autocomplete-items {
|
| 26 | position: absolute;
|
| 27 | border: 1px solid #d4d4d4;
|
| 28 | border-bottom: none;
|
| 29 | border-top: none;
|
| 30 | z-index: 99;
|
| 31 | /*position the autocomplete items to be the same width as the container:*/
|
| 32 | top: 100%;
|
| 33 | left: 0;
|
| 34 | right: 0;
|
Huguet57 | 23a7afe | 2018-07-23 03:29:35 +0200 | [diff] [blame] | 35 | color: black;
|
Huguet57 | ae7b4c2 | 2018-07-23 01:08:23 +0200 | [diff] [blame] | 36 | }
|
| 37 | .autocomplete-items div {
|
| 38 | padding: 10px;
|
| 39 | cursor: pointer;
|
| 40 | background-color: #fff;
|
| 41 | border-bottom: 1px solid #d4d4d4;
|
| 42 | }
|
| 43 | .autocomplete-items div:hover {
|
| 44 | /*when hovering an item:*/
|
| 45 | background-color: #e9e9e9;
|
| 46 | }
|
| 47 | .autocomplete-active {
|
| 48 | /*when navigating through the items using the arrow keys:*/
|
| 49 | background-color: DodgerBlue !important;
|
| 50 | color: #ffffff;
|
| 51 | }
|
| 52 | .autocomplete-year {
|
| 53 | color: #ccc;
|
| 54 | } |