通过css内修改input框placeholder样式

简介: 通过css内修改input框placeholder样式

使用css内修改input框placeholder样式

需求将input框内placeholder属性文字设置颜色及字体大小

修改前: 修改后:

代码

input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
    font-size: 14px;
}
input:-moz-placeholder { /* Mozilla Firefox 4 ~ 18 */
   color:    #909;
   opacity:  1;
   font-size: 14px;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
   font-size: 14px;
}
input:-ms-input-placeholder { /* Internet Explorer 10 ~ 11 */
   color:    #909;
   font-size: 14px;
}
input::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
   font-size: 14px;
}

input::placeholder { /* 大部分现代浏览器 */
   color:    #909;
   font-size: 14px;
}

常见问题:

  1. input框设置placeholder属性在iOS中显示不完整
目录
相关文章
|
3天前
|
移动开发 前端开发 HTML5
2024.3.30-认识 CSS (文本样式、复合选择器)
2024.3.30-认识 CSS (文本样式、复合选择器)
|
1天前
|
前端开发 流计算
程序与技术分享:css样式大全,完整的Css样式大全(整理)
程序与技术分享:css样式大全,完整的Css样式大全(整理)
|
3天前
|
移动开发 前端开发 HTML5
CSS 常用样式属性和字体图标
CSS 常用样式属性和字体图标
|
7天前
|
移动开发 前端开发 HTML5
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
|
3天前
|
Web App开发 存储 SQL
CSS3 常用样式
CSS3 常用样式
CSS3 常用样式
|
21天前
|
前端开发 UED 容器
CSS基础-文本样式:颜色、字体、大小、对齐
【6月更文挑战第8天】本文介绍了CSS中设置文本颜色、字体、大小和对齐的基础知识。通过color属性改变文本颜色,使用font-family设置字体,用font-size调整大小,text-align控制对齐方式。注意浏览器兼容性、文本溢出和响应式设计的问题。提供的代码示例展示了这些属性的用法,帮助创建更具吸引力的网页。
|
3天前
|
移动开发 前端开发 UED
CSS3 常用样式属性
CSS3 常用样式属性
|
3天前
|
移动开发 前端开发 HTML5
认识 CSS (基础选择器、字体样式)
认识 CSS (基础选择器、字体样式)
|
29天前
|
前端开发
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
28 1
|
1月前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
33 1