search

oficiodesign / initial-css

MIT License
4 stars 1 forks source link

floating label design pattern #64

Open robsonsobral opened 4 years ago

robsonsobral commented 4 years ago

Original report by sobral (Bitbucket: sobral, GitHub: sobral).

<label>
<!-- Firefox `:placeholder-shown` if there's an empty `placeholder -->
<!-- Chrome requires a space. -->
    <input placeholder=" " />
    <span>label text</span>
</label>

https://snook.ca/archives/html_and_css/floated-label-pattern-css

input:-ms-input-placeholder + span {
    /* styles that move the label into the input area */
}

input:placeholder-shown + span {
    /* styles that move the label into the input area */
}

‌