William Luis

0 %
William Luis
Fullstack Developer
  • Residence:
    Canada
  • City:
    Toronto
  • Age:
    26
French
English
Spanish
html
CSS
Js
PHP
WordPress
  • Bootstrap, Materialize
  • Stylus, Sass, Less
  • Gulp, Webpack, Grunt
  • GIT knowledge

CSS para Placeholder HTML5

12 de junho de 2013

Sempre gostaria de saber como alterar o estilos de um campo, achei alguns códigos que me ajudaram a tirar as dúvidas que tinha, que esse código tirem a suas dúvidas também. =)

Os exemplos abaixo mostra tipos de CSS específicos para cada navegador, Chrome, Mozilla, Internet Explorer e entre outros.

[sourcecode language=”css”]

<code>/* all */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }</code>
[/sourcecode]

Esses parâmetros são básico mas muito útil para personalizar campos.

Posted in CSS, Dicas, HTML5
Write a comment