/*placeholder字体颜色*/

 

　　::-webkit-input-placeholder{/*WebKitbrowsers*/

 

　　text-align:center;

 

　　color:RGB(154,171,180);

 

　　}

 

　　:-moz-placeholder{/*MozillaFirefox4to18*/

 

　　text-align:center;

 

　　color:RGB(154,171,180);

 

　　}

 

　　::-moz-placeholder{/*MozillaFirefox19+*/

 

　　text-align:center;

 

　　color:RGB(154,171,180);opacity:1;

 

　　}

 

　　:-ms-input-placeholder{/*InternetExplorer10+*/

 

　　text-align:center;

 

　　color:RGB(154,171,180)!important;

 

　　}

 

　　修改表单项样式

 

　　

 

　　select{

 

　　/*清除select的边框样式*/

 

　　border:none;

 

　　/*清除select聚焦时候的边框颜色*/

 

　　outline:none;

 

　　/*隐藏select的下拉图标*/

 

　　appearance:none;

 

　　/*通过padding-left的值让文字居中*/

 

　　padding-left:50px;

 

　　-webkit-appearance:none;

 

　　-moz-appearance:none;

 

　　width:370px;

 

　　line-height:41px;

 

　　height:41px;

 

　　border-radius:20px;

 

　　border:1pxsolidrgba(185,198,203,.5);

 

　　box-shadow:002px#ccc;

 

　　}

 

　　同理，input、button等表单项都可以通过这些不常见的属性调整。

 

　　若想在表单项实现如下效果则可以：

 

　　使用伪类给select添加自己想用的图标

 

　　p:after{

 

　　content:"";

 

　　width:14px;

 

　　height:8px;

 

　　background:url(img/xiala.png)no-repeatcenter;

 

　　//通过定位将图标放在合适的位置

 

　　position:absolute;

 

　　right:20px;

 

　　top:45%;

 

　　//给自定义的图标实现点击下来功能

 

　　pointer-events:none;

 

　　}






本文转载自中文网