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>