Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
floating-labels.css 1.57 KiB
1 
html,
2 
body {
3 
  height: 100%;
4 
}
5
6 
body {
7 
  display: flex;
8 
  align-items: center;
9 
  padding-top: 40px;
10 
  padding-bottom: 40px;
11 
  background-color: #f5f5f5;
12 
}
13
14 
.form-signin {
15 
  width: 100%;
16 
  max-width: 420px;
17 
  padding: 15px;
18 
  margin: auto;
19 
}
20
21 
.form-label-group {
22 
  position: relative;
23 
  margin-bottom: 1rem;
24 
}
25
26 
.form-label-group > input,
27 
.form-label-group > label {
28 
  height: 3.125rem;
29 
  padding: .75rem;
30 
}
31
32 
.form-label-group > label {
33 
  position: absolute;
34 
  top: 0;
35 
  left: 0;
36 
  display: block;
37 
  width: 100%;
38 
  margin-bottom: 0; /* Override default `<label>` margin */
39 
  color: #495057;
40 
  pointer-events: none;
41 
  cursor: text; /* Match the input under the label */
42 
  border: 1px solid transparent;
43 
  border-radius: .25rem;
44 
  transition: all .1s ease-in-out;
45 
}
46
47 
.form-label-group input::-webkit-input-placeholder {
48 
  color: transparent;
49 
}
50
51 
.form-label-group input:-ms-input-placeholder {
52 
  color: transparent;
53 
}
54
55 
.form-label-group input::-ms-input-placeholder {
56 
  color: transparent;
57 
}
58
59 
.form-label-group input::-moz-placeholder {
60 
  color: transparent;
61 
}
62
63 
.form-label-group input::placeholder {
64 
  color: transparent;
65 
}
66
67 
.form-label-group input:not(:placeholder-shown) {
68 
  padding-top: 1.25rem;
69 
  padding-bottom: .25rem;
70 
}
71727374757677787980818283848586878889
.form-label-group input:not(:placeholder-shown) ~ label { padding-top: .25rem; padding-bottom: .25rem; font-size: 12px; color: #777; } /* Fallback for Edge -------------------------------------------------- */ @supports (-ms-ime-align: auto) { .form-label-group > label { display: none; } .form-label-group input::-ms-input-placeholder { color: #777; } }