Introduction to how to modify placeholder style with CSS (code example)-CSS Tutorial-php.cn

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

青灯夜游

Release： 2018-11-10 17:30:23

forward

8056 people have browsed it

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>

Copy after login

(placeholder)

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

(input style)

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

##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>

Copy after login

(placeholder)

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

(input)

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

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>

Copy after login

(placeholder)

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

(input)

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

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)

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

(input - ie11)

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

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>

Copy after login

(placeholder ie11)

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

(input ie11)

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

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;
}

Copy after login

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!