Question

如何修改Element-UI的input样式

Answer 1

直接在页面上重新定义css，或者单独写个css样式文件在element之后引入页面，比如我不喜欢它的圆角，直接定义个css把圆角去掉

.el-input__inner, .el-checkbox__inner, .el-textarea__inner, .el-button {
    border-radius: 0;
}

以下是我个人对Element的input进行调整的css

.el-input__inner {
    height: 33px;
    font-size: 13px;
    box-shadow: none;
    border: 1px solid #e9e9e9;
}

.el-input__inner:hover {
    border-color: #e9e9e9;
}

.el-input__inner:focus {
    border-color: #42a5f5;
    box-shadow: none;
    transition-duration: .5s;
}

.el-input__inner::-webkit-input-placeholder {
    line-height: 20px;
}

.el-input__inner, .el-checkbox__inner, .el-textarea__inner, .el-button {
    border-radius: 0;
}