input点击后边框颜色变化和placeholder字体大小变化效果实现

当设置样式时，要实现input框点击前无边框，点击后边框颜色为蓝色，且placeholder字体放大。

太久没写css有点忘记，所以记录一下。

以下是实现的代码：

1.  
   input {
2.  
   width: 390px;
3.  
   height: 32px;
4.  
   border: none;//设置高亮边框正常情况下不显示
5.  
   border-radius: 4px;
6.  
   list-style: none;
7.  
   outline-color: rgb(153, 153, 255);//设置点击后边框为蓝色
8.  
   }
9.  
   input:focus::-webkit-input-placeholder {//设置点击后placeholder的样式变化
10.  
    font-size: 14px;
11.  
    }

 正常情况下效果：

点击时效果：

这篇好文章是转载于：编程之路