脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → element el-input 删除边框

element el-input 删除边框的实现

 更新时间：2023年04月28日 10:14:29   作者：今天上上签  
本文主要介绍了element el-input 删除边框的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

我们在使用element ui的 el-input输入框时，会面临这样的问题：
官网的样式：

而我们需要的：

我们正常的操作是：但发现行不通…

style="border: 0px;"

然后经过查找资料，发现可以用” >>>“， 这是vue的深度选择器，vue引用了第三方组件，需要在组件中局部修改第三方组件的样式；所以我们更改代码：

<div class="inputDeep">
	<el-input size="medium " value="工况结束时间"></el-input>
 </div>
<style>
.inputDeep >>> .el-input__inner {
  border: 0px;
  box-shadow: 0 0 0 0px;
}
</style>

但是发现并没有效果，原因是我们要在<style>标签内加上scoped属性才能生效

<style scoped>
.inputDeep >>> .el-input__inner {
  border: 0px;
  box-shadow: 0 0 0 0px;
}
</style>

另外，有些Sass 之类的预处理器无法正确解析 >>>，可以使用 /deep/ 操作符( >>> 的别名)，如下：

<style scoped>
.inputDeep /deep/.el-input__inner {
  border: 0px;
  box-shadow: 0 0 0 0px;
}
</style>

可以顺利的去掉input输入框的边框~

到此这篇关于element el-input 删除边框的实现的文章就介绍到这了,更多相关element el-input 删除边框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • js中arguments对象的深入理解

    js中arguments对象的深入理解

    这篇文章主要给大家介绍了关于js中arguments对象的深入理解，文中通过示例代码介绍的非常详细，对大家学习或者使用javascript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-05-05
  • 文本框只能输入数字的js代码(含小数点)

    文本框只能输入数字的js代码(含小数点)

    下面小编就为大家带来一篇文本框只能输入数字的js代码(含小数点)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • 基于js实现的图片拖拽排序源码实例

    基于js实现的图片拖拽排序源码实例

    这篇文章主要给大家介绍了关于如何基于js实现的图片拖拽排序的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • 微信小程序自定义导航栏及其封装的全过程

    微信小程序自定义导航栏及其封装的全过程

    在小程序项目开发过程中常遇到自定义导航栏的需求,所以下面这篇文章主要给大家介绍了关于微信小程序自定义导航栏及其封装的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • JavaScript静态的动态

    JavaScript静态的动态

    JavaScript静态的动态...
    2006-09-09
  • 使用mini-define实现前端代码的模块化管理

    使用mini-define实现前端代码的模块化管理

    这篇文章主要介绍了使用mini-define实现前端代码的模块化管理，十分不错的一篇文章，这里推荐给有需要的小伙伴。
    2014-12-12
  • js中this的指向问题归纳总结

    js中this的指向问题归纳总结

    最近发现在对JS的学习中有很多朋友对this的指向问题还是有很大的误区或者说只是大致了解,但是一旦遇到复杂的情况就会因为this指向问题而引发各种bug。所以这篇文章主要给大家介绍了关于js中this的指向问题的相关资料，需要的朋友可以参考下
    2018-11-11
  • 原生javascript实现匀速运动动画效果

    原生javascript实现匀速运动动画效果

    这篇文章主要为大家详细介绍了原生javascript实现匀速运动动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 前端判断页面是在PC端还是移动端打开四种方法

    前端判断页面是在PC端还是移动端打开四种方法

    本文介绍几种在前端开发中用于判断用户设备类型（PC端或移动端）的方法,包括使用navigator.userAgent、媒体查询、第三方库detect.js和Vue框架插件vue-device-detect,这些方法有助于在开发中处理设备适配和页面权限问题,需要的朋友可以参考下
    2024-10-10
  • JS一维数组转化为三维数组方法

    JS一维数组转化为三维数组方法

    这篇文章主要给大家分享了JS一维数组转化为三维数组的方法，下面文章围绕JS数组转换的相关资料展开内容，对大家的学习有一定的参考价值，需要的小伙伴可以参考一下
    2022-01-01

最新评论