vue动态改变css的值,改变placeholder的颜色。

css 同时被 2 个专栏收录
2 篇文章 0 订阅
6 篇文章 0 订阅
  1. 以改变input的placeholder颜色为例子
<div class="red_bg">
	<input ref="is" type="text" placeholder="请输入内容">
</div>    
  1. 设置事件,动态更新css的值
mounted() {
	// 解决input颜色问题,动态的值
	this.$refs.is.style.setProperty('placeholderColor', this.infoData.text_color);
},
  1. Css样式
 <style lang="less" scoped> 
     .red_bg {
        height: 100%;
        width: 100%;
        placeholderColor: #000000; // 默认颜色
        input::-webkit-input-placeholder{
            color: var(placeholderColor); // 动态值
        }
    }
 </style>   
  1. 补充,微信小程序可以直接设置placeholderStyle来改颜色;
<input type="text" placeholder="请输入" placeholder-style="color: red;"></input>
  1. 参考文章: https://www.jb51.net/article/189040.htm;
  • 1
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值