CSS Placeholder詳解

一、什麼是CSS Placeholder？

CSS Placeholder是指在input或textarea表單元素上的佔位符。它可以使表單輸入更友好、美觀，並增加用戶體驗。當表單元素沒有輸入時，顯示Placeholder里的文本提示；當用戶開始輸入時，placeholder消失，輸入的文本代替placeholder的位置。

下面是一個簡單的CSS Placeholder代碼段：

    
        input[type="text"]::placeholder {
            color: #999;
            font-size: 1rem;
            font-weight: bold;
        }
    

二、CSS Placeholder的樣式設置

CSS Placeholder可以設置顏色、大小、字體等屬性。但需要注意，設置樣式時，需要使用::placeholder或:-ms-input-placeholder、-moz-placeholder、-webkit-input-placeholder等前綴。

下面的代碼段展示了CSS Placeholder的樣式設置：

    
        /*設置顏色*/
        input[type="text"]::-webkit-input-placeholder {
            color: #999;
        }
        input[type="text"]:-moz-placeholder {
            color: #999;
        }
        input[type="text"]::-moz-placeholder {
            color: #999;
        }
        input[type="text"]:-ms-input-placeholder {  
            color: #999;  
        }

        /*設置字體*/
        input[type="text"]::-webkit-input-placeholder {
            font-family: "Microsoft YaHei";
            font-weight: bold;
            font-size: 1rem;
        }

        /*設置大小*/
        input[type="text"]::-webkit-input-placeholder {
            font-size: 1rem;
        }
    

三、CSS Placeholder的兼容性

不同瀏覽器對CSS Placeholder的兼容性不同，需要注意兼容性問題。

IE10及以上版本支持CSS Placeholder，但需要使用:-ms-input-placeholder前綴；Firefox 4及以上版本、Chrome 4及以上版本支持CSS Placeholder，但需要使用::-moz-placeholder和::-webkit-input-placeholder前綴。

下面是一個兼容多個瀏覽器的CSS Placeholder代碼段：

    
        /*IE10*/
        input[type="text"]:-ms-input-placeholder {  
            color: #999;  
            font-size: 1rem;
            font-weight: bold;
        }

        /*Firefox*/
        input[type="text"]::-moz-placeholder {
            color: #999;
            font-size: 1rem;
            font-weight: bold;
        }

        /*Safari*/
        input[type="text"]::-webkit-input-placeholder {
            color: #999;
            font-size: 1rem;
            font-weight: bold;
        }

        /*Chrome*/
        input[type="text"]::-webkit-input-placeholder {
            color: #999;
            font-size: 1rem;
            font-weight: bold;
        }
    

四、CSS Placeholder的優化

為了提高CSS Placeholder的顯示效果和用戶體驗，我們可以通過CSS3實現更多的優化。

下面是一些常見的CSS Placeholder的優化技巧：

1、設置透明度漸變效果

    
        input[type="text"]::-webkit-input-placeholder {
            color: #999;
            font-size: 1rem;
            font-weight: bold;
            opacity: 0.5;          
        }
        input[type="text"]:focus::-webkit-input-placeholder {
            opacity: 0; 
        }
    

2、使用transition實現平滑過渡

    
        input[type="text"]::-webkit-input-placeholder {
            color: #999;
            font-size: 1rem;
            font-weight: bold;
            -webkit-transition: opacity 0.3s linear; 
            transition: opacity 0.3s linear;         
        }
        input[type="text"]:focus::-webkit-input-placeholder {
            opacity: 0; 
        }
    

3、使用transform實現左邊距調整

    
        input[type="text"]::-webkit-input-placeholder {
            color: #999;
            margin-left: 10px;
            -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
        }
        input[type="text"]:focus::-webkit-input-placeholder {
            display: none; 
        }
    

五、CSS Placeholder的總結

CSS Placeholder是一種簡單而有用的樣式技巧，可以大大提高表單輸入的友好性和美觀度。CSS Placeholder樣式設置需要注意兼容性問題，同時可以使用CSS3實現更多的JQ。