blob: 71caab66e27581b89eef3620d06fa9e8a6087c56 [file] [log] [blame]
Huguet57ae7b4c22018-07-23 01:08:23 +02001* {
2 box-sizing: border-box;
3}
4
5.autocomplete {
6 /*the container must be positioned relative:*/
7 position: relative;
8 display: inline-block;
9}
10input {
11 border: 1px solid transparent;
12 background-color: #f1f1f1;
13 padding: 10px;
14 font-size: 16px;
15}
16input[type=text] {
17 background-color: #f1f1f1;
18 width: 100%;
19}
20input[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:*/
avm9996344d4ea52018-09-26 17:06:06 +020032 top: 100%;
Huguet57ae7b4c22018-07-23 01:08:23 +020033 left: 0;
34 right: 0;
Huguet5723a7afe2018-07-23 03:29:35 +020035 color: black;
Huguet57ae7b4c22018-07-23 01:08:23 +020036}
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}