placeholder样式设置_字体颜色大小

更新日期: 2019-06-27 阅读: 6k 标签: input

怎么修改input、textarea元素中的placeholder属性样式?

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

冒号前写对应的input或textarea元素等。 
placeholder属性是css3中新增加的属性,IE9和Opera12以下版本的CSS选择器均不支持占位文本。 这里可以指定input或者textarea的样式  。


样式修改包括:颜色 大小 位置:

input::-webkit-input-placeholder {
       /* placeholder颜色  */
	color: #aab2bd;
	/* placeholder字体大小  */
	font-size: 12px;
	/* placeholder位置  */
	text-align: right;
 }


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/3899

相关推荐

可以使用css的方式让input不能输入文字吗?

在使用一个js插件时,不想让用户点击input输入和触发那个下拉框,用css的方式有什么方法?readonly和disabled都要写到标签上,但input都是这个插件生成的,有什么好的方法解决吗?

input 输入框如何强转大写的2种方式

需要把一个input输入框内的字母自动转变为大写。1.使用JavaScript,在input标签添加onkeyup方法,将字符转为大写。2.使用CSS,给input设置样式。

input 禁止输入特殊字符

方式一:拿到value值以后 在你传递之前处理;方式二:从最根本上也就是提示用户输入不了特殊字符;方式三:onkeyup事件 拿到以后去匹配 跟方式一类似;

<input type=file>文件上传

<input> type 类型为 file 时使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上,或者通过 Javascript 的 File API 对文件进行操作,accept:指示file类型,没有时表示不限制类型

input 内容改变的触发事件

onchange 事件会在域的内容改变时触发。注意:在元素的值改变了且失去焦点时触发(两次的值一样不会触发)。缺陷:通过js代码改变DOM的值不会触发

input的type类型

对部分生僻的input属性值解释:type=reset可以一键清空form表单里面所有的数据、datalist的运用: 输入框输入的值会自动匹配datalist下拉框的值,input的list属性值必须和datalist的id值一致

H5移动端 input输入完成后页面底部留白问题

最近在用vue写几个H5页面在微信上展示,遇到一个在弹窗上input输入完成之后点击键盘的完成,页面底部留出一片空白的问题,当键盘抬起时,window.scrollY会从0变到键盘的高度

input禁止输入的方法

readonly规定输入字段为只读可复制,但是,用户可以使用Tab键切换到该字段,可选择,可以接收焦点,还可以选中或拷贝其文本。disabled 被禁用的 input 元素可复制,不能接收焦点,设置后文字的颜色会变成灰色。无法与 <input type=hidden> 一起使用。

input文本框强制输入指定文字的方法以及IE11的兼容

标签绑定了onkeyup键盘抬起事件以及onafterpaste粘贴文本进输入框两个事件,当有这两个操作时,就会触发相应的校验方法;当事件触发时,首先会有个变量imeStatus校验是否是IE浏览器,然后再根据正则校验进行输入框值的替换

使input文本框不可编辑的3种方法

disabled 属性规定应该禁用 input 元素,被禁用的 input 元素,不可编辑,不可复制,不可选择,不能接收焦点,后台也不会接收到传值。readonly unselectable=”on” 该属性跟disable类似

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!