CSS input 背景提示

最新推荐文章于 2024-06-18 16:37:00 发布

转载最新推荐文章于 2024-06-18 16:37:00 发布 · 2.1k 阅读

收录于

所有同时被 2 个专栏收录

219 篇文章

订阅专栏

Web前端

69 篇文章

订阅专栏

本文深入探讨了HTML5占位符的CSS样式设置，包括不同浏览器下的兼容性处理，通过具体代码实例展示了如何为输入框设置个性化且响应式的占位符样式。

/* 通用 */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

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

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

http://www.webhek.com/html5-placeholder-css/