Vue技能点--el-input el-select调整字体及内边距

1. 背景

el-input输入框默认提供的字体较小,且内边距较大。

这是为了提供统一的样式和好看的外观。

在某些情况下,我们希望使用较大的字体,且让输入框的内边距小一些以便容纳更多东西。

2. 解决方案

输入框样式类为class='el-input',内部输入框的样式类为class='el-input__inner',所以可以针对内部输入框进行统一调整。

.el-input .el-input__inner {

  font-size: 1.5em;

  font-weight: bolder;

  padding: 0 4px;

}

其中padding用于调整输入框内边距。

————————————————

原文链接:https://blog.csdn.net/woshisangsang/article/details/120010906


<style scoped>

  ::v-deep .el-table .cell {

white-space:pre-line;

  }

table {

border-collapse:collapse;

    margin:0 auto;

    text-align:center;

  }

table td,

  table th {

border:1px solid #cad9ea;

    color:#666;

    height:30px;

  }

table thead th {

background-color:#CCE8EB;

    width:100px;

  }

table tr:nth-child(odd) {

background:#fff;

  }

table tr:nth-child(even) {

background:#F5FAFA;

  }

/deep/table .el-input .el-input__inner {

/*font-size: 1.5em;*/

/*font-weight: bolder;*/

    text-align:center;

    padding:0 0px;

  }

/deep/.line-input {

width:180px;

  .el-input__inner {

border-radius:0px;

    border-top-width:0px;

    border-left-width:0px;

    border-right-width:0px;

    border-bottom-width:1px;

    /*outline: medium;*/

    }

}

/deep/.line-input80 {

width:80px;

  .el-input__inner {

border-radius:0px;

    border-top-width:0px;

    border-left-width:0px;

    border-right-width:0px;

    border-bottom-width:1px;

    /*outline: medium;*/

    }

}

.line-input10 {

padding-left:0px; /* 左内边距*/

    padding-right:0px; /* 右内边距*/

  }

</style>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容