1.box-input {
2  position: relative;
3}
4
5.border {
6  background-image: linear-gradient(to right bottom, #e300ff, #ff00aa, #ff5956, #ffb900, #fffe00);
7  box-shadow: -25px -10px 30px -5px rgba(225, 0, 255, 0.5),
8    25px -10px 30px -5px rgba(255, 0, 212, 0.5),
9    25px 10px 30px -5px rgba(255, 174, 0, 0.5),
10    -25px 10px 30px -5px rgba(255, 230, 0, 0.5);
11  padding: 4px;
12}
13
14.input {
15  background-color: #212121;
16  max-width: 250px;
17  height: 40px;
18  padding: 0 19px 0 10px;
19  font-size: 1.1em;
20  position: relative;
21  border: none;
22  color: white;
23  outline: 0;
24  overflow: hidden;
25}
26
27.box-input::after,
28.box-input::before {
29  content: "";
30  width: 130px;
31  height: 30px;
32  position: absolute;
33  z-index: -1;
34}
35
36.box-input::after {
37  bottom: 0;
38  right: 0;
39}
40
41.box-input::before {
42  top: 0;
43  left: 0;
44}
45
46.input::placeholder {
47  transition: all 0.5s ease-in, transform 0.2s ease-in 0.6s;
48}
49
50.input:focus::placeholder {
51  padding-left: 165px;
52  transform: translateY(-50px);
53}
54