css设置了placeholder样式同时解决placeholder显示不完整

最新推荐文章于 2025-10-10 23:14:36 发布

原创最新推荐文章于 2025-10-10 23:14:36 发布 · 7.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #placeholder

前端专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何使用CSS自定义input元素的placeholder属性样式，包括字体大小、颜色等，并提供了解决placeholder显示不完整问题的方法。同时，文章还强调了正确设置input和placeholder样式顺序的重要性。

1.如何设置placeholder属性的样式

input::-webkit-input-placeholder{ /* WebKit, Blink, Edge */
    font-size: 20px;
    color: #ADADAD;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-size: 20px;
    color: #ADADAD;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-size: 20px;
    color: #ADADAD;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-size: 20px;
    color: #ADADAD;
}
input::-ms-input-placeholder { /* Microsoft Edge */
    font-size: 20px;
    color: #ADADAD;
}

2.解决placeholder显示不完整

在这里一定要先设置input，再设置placeholder 且 input样式一定要写在前面

input{
     text-align: center;
     margin: 10px 0 20px 60px;
     width: 210px;
     height: 22px;
}
::-webkit-input-placeholder{ /* WebKit, Blink, Edge */
    font-size: 20px;
    color: #ADADAD;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-size: 20px;
    color: #ADADAD;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-size: 20px;
    color: #ADADAD;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-size: 20px;
    color: #ADADAD;
}
::-ms-input-placeholder { /* Microsoft Edge */
    font-size: 20px;
    color: #ADADAD;
}

(css设置按钮背景颜色透明 )

.button{  
   background-color:transparent; 
   border-style:none;
}