What is the default color and font for input placeholders

Does anyone know what is the default color and font and size for placeholders for inputs and textareas?

<input type="text" name="input" placeholder="Select data"/>

enter image description here

4

2 Answers

Depending on your application / need, you could use a color picker tool, or you could use your Browser's developer console, to be sure. But...

The default input placeholder color varies by browser.

In your screenshot, it's #8e8e8e

Some examples by browser:
In Chrome (Mac) it's #a9a9a9
in Firefox (Mac) it's #777777

Bootstrap 3 does define a "default" placeholder color, which you can see by inspecting the CSS a variety of ways - below is from the CSS directly (For Bootstrap v3.3.7):

.form-control::-moz-placeholder{ color:#999; opacity:1
}
.form-control:-ms-input-placeholder{ color:#999
}
.form-control::-webkit-input-placeholder{ color:#999
}

So - Bootstrap 3 defines the default placeholder color as #999. (For reference, Bootstrap 4 defines the default placeholder color as #636c72).

If you open up bootstrap.css file, and ctrl+f (find) and search for "form-control" and look for placeholder you will find:

 .form-control::-moz-placeholder { color: #999; opacity: 1;
}
.form-control:-ms-input-placeholder { color: #999;
}
.form-control::-webkit-input-placeholder { color: #999;
}

According to bootstraps documentation:

Bootstrap's global default font-size is 14px, with a line-height of 1.428. This is applied to the and all paragraphs. In addition,

(paragraphs) receive a bottom margin of half their computed line-height (10px by default).

link to color

0

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password

Post as a guest

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

You Might Also Like