设置input标签禁用_【CSS专题】lt;elinput/gt;标签设置placeholder属性样式小汇

1、常规样式&＃xff0c;对input标签举例

el-input>export default { data() { return {      inputValue: &＃39;&＃39; } }}script>

2、方式一&＃xff1a;修改重新定义的样式(在谷歌浏览器中使用)&＃xff0c;对input标签举例

"inputValue" placeholder&＃61;export default { data() { return { inputValue: &＃39;&＃39; } }}script>.cust-el-input { input::placeholder { color: #a30014; }}style>

3、方式二&＃xff1a;针对不同浏览器的设置方法(注&＃xff1a;因为不同浏览器的兼容性不同&＃xff0c;所以在写代码方面也会有所差别。)&＃xff0c;对input标签举例

"inputValue" placeholder&＃61;export default { data() { return { inputValue: &＃39;&＃39; } }}script>.cust-el-input { input::-webkit-input-placeholder { /* 使用webkit内核的浏览器 */ color: #07c160; } input:-moz-placeholder { /* Firefox版本4-18 */ color: #07c160; } input::-moz-placeholder { /* Firefox版本19&＃43; */ color: #07c160; } input:-ms-input-placeholder { /* IE浏览器 */ color: #07c160; }}style>

4、方式三&＃xff1a;针对不同类型的input输入框设置placeholder属性样式(注&＃xff1a;其text是相对应html中的text&＃xff0c;如果是密码框&＃xff0c;那么相对应的就是password。)

"inputValue" placeholder&＃61;export default { data() { return { inputValue: &＃39;&＃39; } }}script>.cust-el-input { input[type&＃61;"text"]::-webkit-input-placeholder { /* 使用webkit内核的浏览器*/ color: #e97f81; } input[type&＃61;"text"]:-moz-placeholder { /* Firefox版本4-18 */ color: #e97f81; } input[type&＃61;"text"]::-moz-placeholder { /* Firefox版本19&＃43; */ color: #e97f81; } input[type&＃61;"text"]:-ms-input-placeholder { /* IE浏览器 */ color: #e97f81; }}style>

欢迎关注微信公众号