1. 确定要设置input placeholder样式的HTML元素 首先,你需要确定要对哪个input元素的placeholder进行样式设置。例如,你可能有一个HTML表单,其中包含多个input元素,而你只想对其中一个或几个进行样式调整。 html <input type="text" placeholder="请输入用户名"> 2. 使用CSS选择器定位到该input元素 接下来,...
} .iphone input::-moz-placeholder {/*Mozilla Firefox 19+*/color: #bec6cd!important; } .iphone input:-ms-input-placeholder {/*Internet Explorer 10+*/color: #bec6cd!important; } placeholder的样式修改比较少见,如果你的style加了scoped,那么有可能会不生效,建议写多一个style专门放这个样式的处理...
placeholder是HTML5 input的新属性,英文意思是占位符,它一般表示input输入框的默认提示值。 下面是设置placeholder的文本样式的选择器的示例: /*webkit 浏览器*/#field::-webkit-input-placeholder{font-style:italic;text-decoration:overline;letter-spacing:3px;color:#999; }/*火狐浏览器*/#field::-moz-placehold...
input默认样式 <inputtype="text"placeholder="placeholder"/> 1. 2. 3. 4. 添加自定义样式 <style>input::placeholder{color:#dd5a5d;}</style><inputtype="text"placeholder="placeholder"/> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.
/* 谷歌 */ .el-input__inner::-webkit-input-placeholder { color: red; text-align:center; } /* 火狐 */ .el-input__inner:-moz-placeholder { color: red; text-align:center; } /*ie*/ .el-input__inner:-ms-input-placeholder { ...
<input type="text" placeholder="请设置用户名"> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 设置input聚焦时的样式 input:focus { background-color: red; } 1. 2. 3. 取消input的边框 border: none; outline: none; ...
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: red; } input::-moz-placeholder { /* Firefox 19+ */ color: red; } input:-ms-input-placeholder { /* IE 10+ */ color: red; } input:-moz-placeholder { /* Firefox 18- */ color: red; } ...
input标签的placeholder有默认的样式,但是也是可以修改的,可以修改各种样式,颜色,字体大小,行高等等,修改样式如下: input::-webkit-input-...
设置input 的placeholder的字体样式 input::-webkit-input-placeholder {/* Chrome/Opera/Safari */color: red; }input::-moz-placeholder {/* Firefox 19+ */color: red; }input:-ms-input-placeholder {/* IE 10+ */color: red; }input:-moz-placeholder {/* Firefox 18- */color: red; ...
方法: 代码示例: 注意:设置placeholder的字体大小时须给input也设置相同字体大小,不然在移动端会有bug出现。 对比效果图如下: 正常: 异常: