Introduction to how to modify placeholder style with CSS (code example)

The content of this article is an introduction to the method of modifying the placeholder style with CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Project users often encounter the need to modify the color of the input placeholder. Here is a look at how to set the placeholder with css:

First, let’s take a look at the default input style of chrome

<input>

(placeholder)

(input style)

##It can be found that

placeholder and The default color of input is a little different. Now let's modify the color of input

<input>

(placeholder)

(input)

It is not difficult to find that the

color attribute can only change the color of the input value, but the color of placeholder does not change at all. So, how to change the color of placeholder.

To change the color of

placeholder, you need to use the pseudo class ::placeholder

<input>

(placeholder)

(input)

It should be noted that the compatibility of

::placeholder pseudo-class, the above is in the chrome browser The running result, the same code becomes like this in IE11

(placeholder - ie11)

(input - ie11)

IE solution:

First of all, IE9 and below do not support placeholder. IE10 needs to use

:-ms-input-placeholder, and the attribute needs to be added with !important to increase the priority.

<input>

(placeholder ie11)

(input ie11)

Give other views after Device adaptation scheme

/* - Chrome ≤56,
   - Safari 5-10.0
   - iOS Safari 4.2-10.2
   - Opera 15-43
   - Opera Mobile >12
   - Android Browser 2.1-4.4.4
   - Samsung Internet
   - UC Browser for Android
   - QQ Browser */
::-webkit-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 4-18 */
:-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* Firefox 19-50 */
::-moz-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* - Internet Explorer 10–11
   - Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {
    color: #ccc !important;
    font-weight: 400 !important;
}

/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {
    color: #ccc;
    font-weight: 400;
}

/* CSS Working Draft */
::placeholder {
    color: #ccc;
    font-weight: 400;
}

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's learning.

The above is the detailed content of Introduction to how to modify placeholder style with CSS (code example). For more information, please follow other related articles on the PHP Chinese website!