给el-input设置padding-right不生效(父组件改变子组件样式)_西红柿0925的博客

/deep/

当给div或者el-input 设置id 或者在样式处使用！important
再添加Padding效果不生效，启用插槽也不管用，F12找到el-input样式处前面的类名==.el-input–suffix .el-input__inner==，再在类名前面给加上==/deep/ 就生效
重点代码： /deep/==.el-input–suffix .el-input__inner

<div class="filter-input-inner" style="width: 100%">
            <el-input
              :placeholder="$t('pages.regionmangerForm.keywordPlaceholder')"
              suffix-icon="el-icon-search"
              :maxlength="maxlength"
              clearable
              v-model.trim="filterText">
            </el-input>
</div>
.filter-input {
   padding: 10px;
   border-bottom: 1px solid  #EBEEF5;
   /deep/.el-input--suffix .el-input__inner {
     padding-right: 60px;
                                    / 这个方法有点不那么自然，如果输入英文和中文，会造成有一点间隙的存在，如果大家优化的话可以自行发挥，能力有限这个是最简单的版本…使用slot :Select 组件头部内容。然后设置样式即可，不用监听，展现效果上会比较好一点。1.首先我们可以获取输入内容的宽度，然后给定一个span标签，使其的宽度撑开input的宽度。如果默认直接使用，这里的input输入框的宽度是width：100%。继承它的父级的宽度。这里需要实时监听输入内容的宽度。
                                    文章目录问题描述解决方案方案一方案二更多方案结语
在一个含有padding的div元素中包含一个input标签和一个icon，但是input元素显示异常。（具体表现为父元素的padding对子元素的input失效）
异常效果图：
案例代码：
<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8">
	<title>Taoism</title>
      <el-form-item label="审批人">
        <el-col :span="8">
          <el-input v-model="formInline.user" placeholder="审批人">.
                                    博主原来一开始是想实现form标签中的input元素离浏览器的右边界有一定距离的效果，但是无论我在input的css中调margin-right还是在form中调padding-right都不能实现前面说的效果，后来博主改变思路用div来包裹input在调padding还是不行，我擦。于是我在改变思路用table来包裹，然后再调padding，嘿，这下可以了。
  调整失败的代码
<!DOCTYPE
	或者只是想要修改当前组件内的样式，而不影响其他组件
	在style标签携带scoped元素的时候就很难覆盖UI框架的样式
这时候就需要使用深度选择器/deep/，或者>>>穿透 scoped，而有些Sass 之类的预处理器无法正确解析>>>。
可以使用/deep/或::v-deep组合器 ( &gt...