element-ui中el-input需要改变placeholder的字体颜色

如下所示,需要改变输入框中默认文字的字体颜色,

input::-webkit-input-placeholder {
    color: #c0c4cc;
  }
  input::-moz-input-placeholder {
    color: #c0c4cc;
  }
  input::-ms-input-placeholder {
    color: #c0c4cc;
  }

在vue文件中加上上面代码就可以实现改变输入框中默认文字颜色了,

如果不生效,可以试一下在前面加上/deep/应该就可以了。

html代码有如下两种,即使用input/el-input,都可以使用上面的代码。

<el-form-item prop="password">
      <input @keyup.enter="login" type="password" :value="pwd" @input="setPwd" placeholder="请输入密码">
</el-form-item>

<el-form-item label="" prop="userName">
     <el-input v-model="form.userName" placeholder="用户名"></el-input>
</el-form-item>

原文地址:https://www.cnblogs.com/5201314m/p/11476963.html

时间: 2024-10-25 14:24:12

element-ui中el-input需要改变placeholder的字体颜色的相关文章

改变placeholder的字体颜色

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #f00; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #f00; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #f00; } input::-webkit-input-placeholder, textarea::-w

改变placeholder的字体颜色大小

input::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: #333; } input::-moz-placeholder { /* Mozilla Firefox 19+ */ font-size:14px; color: #333; } input:-ms-input-placeholder { /* Internet Explorer 10+ */ font-size:14px; color

textView设置按下和焦点改变时让字体颜色发生变化

在res/color/text_color_selector.xml这个下编写: <?xml version="1.0" encoding="utf-8" ?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:color

修改input框默认显示的字体颜色

修改input框默认显示的字体颜色(还可以修改字体大小) //chrome谷歌浏览器,Safari苹果浏览器 input[name="color"]::-webkit-input-placeholder { /* WebKit browsers */ color: red; font-size:15px;} //firefox火狐浏览器input[name="color"]:-moz-placeholder { /* Mozilla Firefox 4 to 18

Element UI 中被隐藏的滚动条

Element UI 官网中有用到自定义的滚动条组件,但是发布的所有版本中都不曾提及,个中原因我们不得而知,不过我们还是可以拿过来引用到自己的项目中. 使用的时候,放在 <el-scrollbar></el-scrollbar> 标签内即可如: <div style="height:100%"> <el-scrollbar class="m-scroll" style="height:100%">

Element ui 中使用table组件实现分页记忆选中

我们再用vue和element-ui,或者其他的表格的时候,可能需要能记忆翻页勾选,那么实现以下几个方法就ok了 首先定义个data值 data () { return { multipleSelectionAll: [], // 所有选中的数据包含跨页数据 idKey: 'personId' // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下) } } 方法中定义以下: methods : { // 设置选中的方法 setSelectRow() { if (!this.multi

element ui 中的时间选择器,禁用今天以前的时间

<el-date-picker v-model="baseInfo.addTime" type="datetime" placeholder="选择时间" :picker-options="pickerOptions"></el-date-picker> pickerOptions: { disabledDate(time) { return time.getTime() < Date.now()

Element ui 中的表格数据格式转换

原文地址:https://www.cnblogs.com/cwzqianduan/p/8663140.html

如何改变placeholder的默认颜色

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #f00; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: