1.input-container {
2  position: relative;
3  display: flex;
4  width: 100%;
5  max-width: 290px;
6}
7
8.input-container > span,
9.input-container .input {
10  white-space: nowrap;
11  display: block;
12}
13
14.input-container > span,
15.input-container .input:first-child {
16  border-radius: 6px 0 0 6px;
17}
18
19.input-container > span,
20.input-container .input {
21  border-radius: 0 6px 6px 0;
22}
23
24.input-container > span,
25.input-container .input {
26  margin-left: -1px;
27}
28
29.input-container .input {
30  position: relative;
31  z-index: 1;
32  flex: 1 1 auto;
33  width: 1%;
34  margin-top: 0;
35  margin-bottom: 0;
36}
37
38.input-container span {
39  text-align: center;
40  padding: 8px 12px;
41  font-size: 14px;
42  line-height: 25px;
43  color: #6b7385;
44  background: #d4def5;
45  border: 1px solid #CDD9ED;
46  font-weight: bold;
47  transition: background 0.3s ease, border 0.3s ease, color 0.3s ease;
48}
49
50.input-container:focus-within > span {
51  color: #fff;
52  background-color: #148cd1;
53  border-color: #148cd1;
54}
55
56.input {
57  display: block;
58  width: 100%;
59  padding: 8px 16px;
60  line-height: 25px;
61  font-size: 14px;
62  font-weight: 500;
63  font-family: inherit;
64  border-radius: 6px;
65  -webkit-appearance: none;
66  color: #99A3BA;
67  border: 1px solid  #CDD9ED;
68  background: #fff;
69  transition: border 0.3s ease;
70}
71
72.input::placeholder {
73  color: #CBD1DC;
74}
75
76.input:focus {
77  outline: none;
78  border-color: #148cd1;
79}