Coolest Guides on the Planet

coolest guides on the planet

Coolest Guides On The Planet

  • Home
  • macOS
  • WebDev
  • All Posts
  • Contact

Style The Placeholder Text in Input Fields in Forms with CSS

January 2, 2014 2 Comments

With CSS you can change the style of placeholder text in form and search fields, the placeholder HTML 5 form attribute is supported in the latest browser versions, how you get text pre-populated in an input field and use the placeholder attribute is explained here.

You can change how the placeholder text style looks in the browser  via CSS by default using the ::input-placeholder pseudo selector…


By default the CSS styling in browsers is a small font with a light grey coloring,  you can change this by using the CSS dynamic pseudo selectors, which will cover the major browsers Safari, Chrome, Firefox and IE…

::-webkit-input-placeholder {
 font-size: 14px;
 color: #d0cdfa;
 text-transform: uppercase;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}
:-moz-placeholder { /* older Firefox*/
 font-size:14px;
 color: #d0cdfa;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}
::-moz-placeholder { /* Firefox 19+ */ 
 font-size: 14px;
 color: #d0cdfa; 
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
} 
:-ms-input-placeholder { 
 font-size: 14px; 
 color: #d0cdfa;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}

So in the example above a few of the CSS rules are restyling the default text font size, color and alignment.

The CSS style properties you can use with input-placeholder are:

  • color
  • font-size
  • font-style
  • font-weight
  • letter-spacing
  • line-height
  • padding
  • text-align
  • text-decoration

You may need to add in the !important declaration to override some of the browsers settings.

For the regular input field text styling just use the input element.

Placeholder text is not supported on IE8 and earlier however including a polyfil javascript solution can support those browsers. I have also created a plugin for its use in WordPress.

Cats: WebDev

Tags

3gs 10.6 apache backup baseband boot clean urls cpanel css curl custom database drupal el capitan git Google image instadmg ios iphone jailbreak keys lion mac macos mojave macos sierra menu mysql OSX panda php phpmyadmin private public redirect redsn0w remote rsa SEO shell ssh terminal unstoppables upgrade urls

Donate a Beer to the Coolest Guides

Get Beaver Builder Now!

Copyright © 2023· Neil Gee - All Rights Reserved - Hosted by Runcloud

Copyright © 2023 · gee on Genesis Framework · WordPress · Log in