忙裡偷閒的部落格

HTML5定義了10幾種的新的輸入型別，有興趣的朋友可以上W3CSchool看看詳細的教學文章，每個都能把玩看看，相當簡單易學。

今天在玩佔位文字時，突發奇想，要如何改變placeholder的文字顏色或者背景顏色呢? 上網爬文了一下，能用CSS解決。

如果你看不到以下的textbox內的佔位文字(Please input texts)，表示瀏覽器不支援，目前IE9以下的版本都不支援。

加入以下的CSS Style可改變佔位文字顏色及背景顏色:

<styletype="text/css">

     ::-webkit-input-placeholder { color:fff; background-color:#7A8899;}

     input:-moz-placeholder { color:fff; background-color:#7A8899;}  

</style>

這樣好像太單調了，我想用一個圓角的panel包住這組textbox跟button，同樣用css可作到:

這次我用一個header tag包住texbox跟button，再以css改變header的padding、border-radius...

 <style type="text/css">

    ::-webkit-input-placeholder { color:fff; background-color:#7A8899; }/*for Chrome & & */
    input:-moz-placeholder { color:fff; background-color:#7A8899; }
header{
    padding:12px;
    border-radius:5px;
    background-color:#f2f3f1;
    display:inline-block;
}
</style>

<header id="mydiv">
<input type="text" placeholder="please input texts"/><input type="button" value="Click"/>
</header><p>

接近完美了@@，不過如果能為header加個陰影，豈不是更有質感嗎。只要在style中再加入一句box-shadow:1px 3px 3px #666;

看似完成了，但悲劇發生了!IE8、9不支援，這時想到了參加微軟html5研討會時，Will保哥所演示的範例，有用到PIE.HTC這個檔案，這個檔案可解決IE6-9的CSS相容性問題。官方網站也設計了個CSS產生器，讓使用者自行設定後，產生CSS碼。(記得下載PIE.HTC並把它跟html檔放在一塊):

另外，我也找到了另一個CSS產生器的網站，來產生漸層效果For other browsers - Ultimate CSS Gradient Generator。使用方式跟PIE-HTC的官網上差不多，但細部調整的選項更多，各位能夠玩玩看。