【UI】 修改element-ui input输入框placeholder提示信息、占位符的样式

这篇具有很好参考价值的文章主要介绍了【UI】 修改element-ui input输入框placeholder提示信息、占位符的样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

修改elementui 里面input的placeholder字体颜色

如何修改

代码如下:


::placeholder选中placeholder,重写样式(涉及到样式还要考虑到穿透::v-deep)
.el-input__inner::placeholder {
  color:  #31E5F5;
}

/* 考虑到兼容的话就是*/
/* 谷歌 */
.el-input__inner::-webkit-input-placeholder {
  color:  #31E5F5;
}
/* 火狐 */
.el-input__inner:-moz-placeholder {
  color:  #31E5F5;
}
/*ie*/
.el-input__inner:-ms-input-placeholder {
  color:  #31E5F5;
}

效果

谷歌修改placehoder,elementui,vue.js,javascript,elementui

案例展示

vue2.x代码

<template>
  <div class="test">
    HelloWorld
    <br />
    <br />
    <br />
    <el-date-picker v-model="value" type="datetime" placeholder="选择日期时间">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
    };
  },
};
</script>

<style scoped>

::v-deep .el-input--prefix .el-input__inner{
  color: blue;
}

::v-deep .el-input--prefix .el-input__inner::placeholder {
  color: red;
}

</style>

案例效果

谷歌修改placehoder,elementui,vue.js,javascript,elementui
谷歌修改placehoder,elementui,vue.js,javascript,elementui文章来源地址https://www.toymoban.com/news/detail-618683.html

到了这里,关于【UI】 修改element-ui input输入框placeholder提示信息、占位符的样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue element-ui el-input输入框绑定@keyup.enter回车事件无效

    由于element-ui把input进行了封装,input外面是多一层div的。 在element-ui里有很多因为自身封装了几层标签导致事件和样式无法按想要的效果呈现,遇到后可以在网页中查看dom结构分析原因。 所以对于el-input,使用 @keyup.enter是无效的,需要加上 .native 限制符 .native修饰符的作用:

    2024年02月16日
    浏览(55)
  • vue+element-ui input输入框设置属性type为number去除右边的上下按键

    当 input type=number 时,去掉后面的上下按钮 1.全局样式改变: 2.在style中使用的是vue+element,通常写当前页面的样式时使用scoped,防止篡改其他页面样式,但是这样会发现上面的代码失效,此时需要使用/deep/去寻找 【定义样式】去除表框、去除上下箭头、去除滚轮事件 3.在sty

    2024年02月11日
    浏览(49)
  • VUE element-ui之form表单中input输入超过规定长度error提醒,并实时显示输入长度,可无限输入

    需求:输入超过规定长度error提醒,并实时显示输入长度,可无限输入 步骤: 我的项目中使用校验比较多,所以进行简单的封装: 新建js文件写入下面的函数 需要校验的组件引用使用: data中定义: form表单中prop要和rules中定义校验名一致: 看效果: 可以看到我们自定义n

    2024年02月16日
    浏览(44)
  • element-ui中Tooltip文字提示——el-tooltip的样式修改

    注意 :以下修改都需要在全局样式修改,因为这个组件的层级,并不是在你使用他的地方,而是和你的app同一层级,所以在当前使用的地方找不到tip提示的dom节点。 修改提示框中长方形框的背景颜色 修改提示框中的小三角的边框颜色

    2024年02月11日
    浏览(75)
  • 【已解决】element-ui组件嵌套太多层,导致内部el-input和el-select 等组件无法正常输入解决方案

    如果 element-ui 组件嵌套太多层,可能会导致内部的 el-input 和 el-select 等组件无法正常输入。 出现这种问题通常是由于 z-index 属性设置不正确导致的。 解决这个问题的方法是调整组件的 z-index 属性,使其不会被其他组件覆盖。以下是一个解决方法: 在上面的代码中,我们首先

    2023年04月13日
    浏览(59)
  • element-ui :封装el-input 遇到的问题

    因项目中有多处输入框要求只能输入整数或者浮点数, el-input 设置type=number 火狐浏览器这个属性是无效的; 所以就想到了 使用el-input type=text 输入的时候 正则匹配, 只能输入整数或者浮点数; 所以为了方便使用,需要对第三方库el-input 进行封装。 1. 初始封装的组件Number-in

    2024年02月03日
    浏览(59)
  • Element UI input输入框实现模糊查询

    Element UI的input输入框进行搜索的时候(根据输入内容提供对应的输入建议)有个坑,它只能用第一个字进行搜索,不能够实现模糊匹配,下面的方法就是填这个坑。 原来搜“奖”,后台给返回数据,但是不会出现下拉框。 例如:  只要搜“抽”才出现下拉框 解决后实现效果

    2024年02月13日
    浏览(35)
  • input输入框修改placeholder颜色

    通常情况下我们是用输入框的时候不想用它默认的占位符placeholder的默认颜色,所以我们想要改变它默认的颜色就需要::placeholder,代码示例:  这里我用的是element-ui的el-input输入框,其他输入框也同样适用。

    2024年02月07日
    浏览(44)
  • 修改element-ui源码

    element-ui修改源码 1.首先,从git上拉取element的源码 2.安装依赖 npm install 3.修改 packages 中的源码,然后进行打包 npm run dist 4.找到你的项目中的 node_modules 包下的 element-ui 文件夹下的 lib 包,用你修改好后打包生成的 lib 包进行替换即可生效 下载链接在官网底部

    2024年02月11日
    浏览(46)
  • element-ui输入框下拉远程搜索

    实现效果: 可以在你输入的时候出现一个下拉,将你输入的东西与下拉框的内容进行匹配,然后下拉框会显示匹配的内容  相关代码: :fetch-suggestions=\\\"querySearchAsync\\\"是定义下拉内容的函数方法,restaurants是下拉框的内容,timeout这个定时器使用来决定多少秒后显示筛选后的内容

    2024年02月05日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包