直接在页面上重新定义css,或者单独写个css样式文件在element之后引入页面,比如我不喜欢它的圆角,直接定义个css把圆角去掉以下是我个人对element的input进行调整的css
elemnt-ui有很多组件,但是我用的时候需要针对很多组件做自定义,比如下拉框的箭头等各种默认样式,官网那个看不太懂,有没有具体一点的教程天津众维ui设计提供
直接在页面上重新定义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:33pxfont-size:13pxbox-shadow:noneborder:1pxsolid#e9e9e9}.el-input__inner:hover{border-color:#e9e9e9}.el-input__inner:focus{border-color:#42a5f5box-shadow:nonetransition-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}
elementuivue项目中,在当前vue文件中使用stylescoped包裹的样式中重置input框的样式无法生效
方式:在本页面重新定义style样式且不需要写scoped即可生效
注意:为了不影响其他位置的元素样式,需要定义一个特定的class类名便于区分。
popover组件生效后会被渲染在最外层,所以你要在外层指定.el-popover的样式