I recently started working on a project using Semantic UI.
It’s a super-rich CSS framework, coming with nearly all the things you want and need.
From my perspective it is simpler than bootstrap to learn, as there is much more “speaking” css class names like a FORM is “ui form”, a grid is “ui grid” and so on.
Unfortunately it is missing one import style utility called FLOATING LABELS.
This is the coming into effect when you get into an input field and start typing. It shifts the name of the field to the top of the input field and still shows the name.
I found a script that helps you doing this.
https://codepen.io/ysung812/full/MWWGJJz
Simplified you just need the CSS styles:
/*************************
Floating label
**************************/
.ui.input.floating-label {
position: relative;
margin-bottom: 1rem;
}
.ui.input.floating-label>input,
.ui.input.floating-label>label {
height: 3.125rem;
padding: 0.75rem;
}
.ui.input.floating-label>label {
text-align: left;
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
margin-bottom: 0;
/* Override default `
.ui.input.left.icon.floating-label>label {
left: 26.99px;
}
.ui.input.floating-label input::-webkit-input-placeholder {
color: transparent;
}
.ui.input.floating-label input:-ms-input-placeholder {
color: transparent;
}
.ui.input.floating-label input::-ms-input-placeholder {
color: transparent;
}
.ui.input.floating-label input::-moz-placeholder {
color: transparent;
}
.ui.input.floating-label input::placeholder {
color: transparent;
}
.field.floating-label input:focus::-webkit-input-placeholder {
color: transparent;
}
.field.floating-label input:focus:-moz-placeholder {
color: transparent;
}
.field.floating-label input:focus::-moz-placeholder {
color: transparent;
}
.field.floating-label input:focus:-ms-input-placeholder {
color: transparent;
}
.ui.input.floating-label input:not(:placeholder-shown) {
padding-top: 1.25rem;
padding-bottom: 0.25rem;
}
.ui.input.floating-label input:not(:placeholder-shown)~label,
.ui.input.floating-label input:-webkit-autofill~label {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 12px;
color: #777;
}
.ui.input.floating-label::-webkit-input-placeholder {
color: #6c757d;
opacity: 1;
}
.ui.input.floating-label::-moz-placeholder {
color: #6c757d;
opacity: 1;
}
.ui.input.floating-label:-ms-input-placeholder {
color: #6c757d;
opacity: 1;
}
.ui.input.floating-label::-ms-input-placeholder {
color: #6c757d;
opacity: 1;
}
.ui.input.floating-label::placeholder {
color: #6c757d;
opacity: 1;
}
/* Fallback for Edge
————————————————– */
@supports (-ms-ime-align: auto) {
.ui.input.floating-label>label {
display: none;
}
.ui.input.floating-label input::-ms-input-placeholder {
color: #777;
}
}
/* Fallback for IE
————————————————– */
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
.ui.input.floating-label>label {
display: none;
}
.ui.input.floating-label input:-ms-input-placeholder {
color: #777;
}
}