您的位置：首页 > 编程技术 > js  >  vant如何修改placeholder样式

vant如何修改placeholder样式

 更新时间：2022年5月24日 21:10  点击：1093 作者：小糖穿越火线

如何修改placeholder样式

::-webkit-input-placeholder {
  color: #ffffff;
  font-weight: 400;
}
/* Firefox 4-18 */
:-moz-placeholder {
  color: #ffffff;
  font-weight: 400;
}
/* Firefox 19-50 */
::-moz-placeholder {
  color: #ffffff;
  font-weight: 400;
}
/* - Internet Explorer 10–11
- Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {
  color: #ffffff !important;
  font-weight: 400 !important;
}
/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {
  color: #ffffff;
  font-weight: 400;
}
/* CSS Working Draft */
::placeholder {
  color: #ffffff;
  font-weight: 400;
}

设置placeholder属性样式的多种写法

我们经常用到placeholder属性是在input标签里面，placeholder属性主要作用是让输入框有个提示的显示。 

那当我们想要改变placeholder属性中文字的大小颜色等样式时，又如何设置呢？

我们先来看一下正常的placeholder属性样式：

<input type="text" placeholder="正常的样式">

效果图：

在这里插入图片描述

上面的样式就是placeholder属性默认的样式，如果我们想要突出字体，是不是想把字体颜色改变一下，接下来我们试一下把字体颜色改为红色，先想一下该如何设置呢？

效果图：

在这里插入图片描述

代码：

第一种最简单的写法

在谷歌浏览器中使用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>设置placeholder属性样式的多种写法</title>
</head>
<style>
	input::placeholder{
		color:#DD5A5D;
	}       
</style>
<body>
	<input type="text" placeholder="字体颜色为红色">
</body>
</html>

第二种写法

注：因为不同浏览器的兼容性不同，所以在写代码方面也会有所差别。

input::-webkit-input-placeholder{   /* 使用webkit内核的浏览器 */
	color: #E0484B;
}
input:-moz-placeholder{    /* Firefox版本4-18 */
	color: #E0484B;
}              
input::-moz-placeholder{    /* Firefox版本19+ */
	color: #E0484B;
}              
input:-ms-input-placeholder{   /* IE浏览器 */
	color: #E0484B;
}

注： 冒号前可写相对应的input或textarea元素等，也可以省略不写，直接冒号开头。 

第三种写法

有种写法虽然是复杂了点，但还是要介绍一下。

input[type='text']::-webkit-input-placeholder{   /* 使用webkit内核的浏览器*/
	color: #E97F81;
}
input[type='text']:-moz-placeholder{    /* Firefox版本4-18 */
	color: #E0484B;
}              
input[type='text']::-moz-placeholder{    /* Firefox版本19+ */
	color: #E0484B;
}  
 input[type='text']:-ms-input-placeholder{   /* IE浏览器 */
	color: #E0484B;
}

注：第三种写法中的text是相对应html中的text，如果是密码框，那么相对应的就是password。

例如： 

html：

<input type="password" placeholder="字体颜色为红色">

css：

input[type='password']::-webkit-input-placeholder{   /* 使用webkit内核的浏览器*/
	color: #E97F81;
}

其实还有很多种方法，这有待我们去发现，好了，今天就分享到这里，有疑问的请留言。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持猪先飞。

原文出处：https://blog.csdn.net/tangkthh/article/details/107862555

[!--infotagslink--]

相关文章

  • 使用Vant完成通知栏Notify的提示操作

    这篇文章主要介绍了使用Vant完成通知栏Notify的提示操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-11

  • 解决vant-UI库修改样式无效的问题

    这篇文章主要介绍了解决vant-UI库修改样式无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-03

  • vant 解决tab切换插件标题样式自定义的问题

    这篇文章主要介绍了vant 解决tab切换插件标题样式自定义的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-14

  • elementui的el-popover修改样式不生效的解决

    在使用element-ui的时候，有一个常用的组件，那就是el-popover，本文就介绍一下elementui的el-popover修改样式不生效的解决方法，感兴趣的可以了解一下...2021-07-01

  • BootStrap CSS全局样式和表格样式源码解析

    这篇文章主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-01-23

  • 详解基于Vue cli开发修改外部组件Vant默认样式

    这篇文章主要介绍了详解基于Vue cli开发修改外部组件Vant默认样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-04-04

  • 基于leaflet.js实现修改地图主题样式的流程分析

    这篇文章主要介绍了基于leaflet.js实现修改地图主题样式的流程，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-05-16

  • vue-router为激活的路由设置样式操作

    这篇文章主要介绍了vue-router为激活的路由设置样式操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18

  • WindowsForm实现TextBox占位符Placeholder提示功能

    这篇文章主要介绍了WindowsForm实现TextBox占位符Placeholder提示，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-13

  • 微信小程序引入Vant框架的全过程记录

    Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用,这篇文章主要给大家介绍了关于微信小程序引入Vant框架的相关资料,需要的朋友可以参考下...2021-06-08

  • photoshop图层样式详解之斜面和浮雕详解

    今天小编在这里就来给photoshop的这一款软件的使用者们来说下图层样式详解之斜面和浮雕，各位想知道具体信息的使用者们，那么下面就快来跟着小编一起看一看教程吧。 ...2016-09-14

  • 使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)

    最近接了个项目需要开发一个app项目，由于是第一次接触这种app开发，经过一番思考，决定使用Vue3+Vant前端组件的模式进行开发，下面把问题分析及实现代码分享给大家，需要的朋友参考下吧...2021-06-10

  • Vant+postcss-pxtorem 实现浏览器适配功能

    这篇文章主要介绍了Vant+postcss-pxtorem 实现浏览器适配,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-02-05

  • AngularJS使用ng-class动态增减class样式的方法示例

    这篇文章主要介绍了AngularJS使用ng-class动态增减class样式的方法,结合具体实例形式分析了ng-class操作页面class样式的相关技巧,需要的朋友可以参考下...2017-05-22

  • jQuery zTree如何改变指定节点文本样式

    这篇文章主要介绍了jQuery zTree如何改变指定节点文本样式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-10-17

  • 基于Vant UI框架实现时间段选择器

    这篇文章主要为大家详细介绍了基于Vant UI框架实现时间段选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-12-24

  • PS怎么用图层样式制作好看的图案

    初学者怎么快速用ps制作出好看的图案呢？小编分享了一篇利用ps的图层样式制作好看图案的教程，操作简单初学者也能轻松学会，希望能对大家有所帮助！ 今天为大家介绍PS利...2016-12-15

  • .net 弹出消息框后导致页面样式变乱解决方法

    点击按钮，执行提交操作，弹出消息框后，页面的样式变乱，已经确定了不是css样式的问题，接下来与大家共同探讨下究竟是什么问题导致页面变乱...2021-09-22

  • 利用photoshop图层样式制作火焰字效果教程

    在利用photoshop图层样式制作火焰字效果过程中，用图层样式来制作初步的红色纹理字，然后增强边缘的高光，再用火焰素材叠加，就可以得到非常不错的效果 最终效果 ...2016-09-14

  • phpcms中的评论样式修改方法

    phpcms中自带的评论插件很好用，但是样式不太好看，今天小编给大家分享两种关于phpcms中的评论样式修改方法，一起看看吧...2016-11-01