Styling Placeholder Text của thẻ input với CSS

Styling Placeholder Text của thẻ input với CSS

by Cong Nguyen Trong

HTML

<!-- HTML -->
<input placeholder="CSS Placeholder">

<br>
<br>
Link bài viết:
<a href="https://wp.me/paAgxr-Ql">Styling Placeholder Text của thẻ input với CSS</a>

CSS

input {
    padding: 10px 20px;
    outline: none;
    border-radius: 4px;
    border: 2px solid burlywood;
    width: 50%;
}

::placeholder {
    color: deeppink;
    font-size: 1rem;
    text-transform: uppercase;
}

/* WebKit, Edge */

::-webkit-input-placeholder {
    color: deeppink;
}

/* Firefox 4-18 */

:-moz-placeholder {
    color: deeppink;
    opacity: 1;
}

/* Firefox 19+ */

::-moz-placeholder {
    color: deeppink;
    opacity: 1;
}

/* IE 10-11 */

:-ms-input-placeholder {
    color: deeppink;
}

/* Edge */

::-ms-input-placeholder {
    color: deeppink;
}

/* MODERN BROWSER */

::placeholder {
    color: deeppink;
}