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