# 表单设计器高级操作 ## 全局CSS增强 可以在**表单属性**里最下方找到**CSS增强**的输入框,在这里可以写css样式,在预览的时候会自动应用你写的样式。 配合几乎每个组件都有**CSS类名**属性,就能做到单独对某一个或某些组件写样式修改了。 ![](https://img.kancloud.cn/dd/cc/ddccda5a3742830b573580a1669e5ef9_298x759.png) ## CSS增强示例 例如我向页面中拖入了一个**单行文本**组件,并且想要把这个输入框的文字颜色改为**红色**,需要有以下步骤: 1. 修改组件的CSS类名属性,增加一个类名,例如叫`input-red` ![image](http://www.jeecg.org/data/attachment/forum/201908/07/120529rs08sk7ttu2wr78i.png) 2. 在表单属性里的CSS增强中修改样式,如下所示: ![image](http://www.jeecg.org/data/attachment/forum/201908/07/120532tspzoznqqet6qqz6.png) 正确示例: ``` .input-red .el-input__inner{ color: red; } ``` 3. 接着点预览查看效果 ![image](http://www.jeecg.org/data/attachment/forum/201908/07/120533fxajo9i8o5xf2xcm.png) **我们可以发现输入框的颜色并没有变成红色**,这是因为element-ui将真正的input组件放到了更深层的dom里,我们可以用chrome的devTools工具查看一下 4. 找到真实的input类名,我们可以发现真实的input类名叫做`el-input__inner` ![image](http://www.jeecg.org/data/attachment/forum/201908/07/120535huauuttisyrxrhca.png) 5. 再次修改CSS增强代码,如下图所示 ![image](http://www.jeecg.org/data/attachment/forum/201908/07/120537gmamava8218an7nx.png) 6. 再点击预览查看一下效果,发现输入框的颜色已经变成红色了,并且还不会影响到其他组件。 ![image](http://www.jeecg.org/data/attachment/forum/201908/07/120538godnnnl1zgoo1mwn.png)