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。