皮肤设计和自定义CSS
这篇文章将教你几招对表单各种样式的优化，迅速提升表单的颜值，让它变得更好看，增加辨识度塑造品牌个性。
模板库
纯色皮肤
共有8款主流的纯色皮肤可供选择，表单的结构(表头/字段/按钮等)会跟随它的样式来改变。
主题皮肤
提供了8种按颜色风格分类的主题皮肤，每个颜色分类下有几十款皮肤模板，点击即可一键切换。
共享皮肤
将自己设计的皮肤共享给团队的其他人使用，有以下两种使用方式：
引用
此表单将与其它表单一起共享此皮肤，细节设定时，将影响所有使用此皮肤的表单，一般在多个表单需要统一风格时选择此选项。复制
系统将复制一份皮肤至当前表单，细节设定时，不影响使用此皮肤的其它表单，一般在多个表单需要不同的风格时选择此选项。
自定义
如果您喜欢 DIY或对表单皮肤有更高的要求，可以再选择纯色或者主题皮肤后进行个性化自定义设计。
表头设置
表头可自定义上传图片、纯色、无。自定义图片支持编辑裁剪，调整高度或拉伸显示方式。
表体设置
表体可自定义的细节非常丰富，包含表单的背景色、文字、提交按钮以、字段按钮、边框、自定义样式等。
这里着重介绍下表体中的自定义样式功能，有两种实现方式：
1.覆盖原有CSS名称。系统会为每个组件设置默认的CSS样式名称，你可以重写这些样式。
2、定义新的CSS名称，然后在表单设计器中指定使用该名称。
另外表姐整理了非常多的 CSS样式代码库，可以实现很丰富的页面效果。比如字段在手机并排、两列或三列显示，隐藏商品字段商品金额，文本框滚动，自定义提交按钮圆角弧度，或者隐藏表单名称等，这个功能非常灵活。
| ID | 名称 | 备注 |
|---|---|---|
| 1 | 输入框居中、整个字段居中 | 自定义皮肤 .input-center{text-align:center} 编辑页面CSS input-center |
| 2 | 组合单选框行标签左对齐代码 | 自定义皮肤：.centerlikert table th { text-align: left; } 编辑页面CSS:centerlikert |
| 3 | 字段在手机端并行显示代码 | 自定义皮肤：@media screen and (max-width: 768px){ .fields li.mobile-half{ float: left;width: 50%; clear: none;box-sizing: border-box;} .fields li.mobile-half::after{content: none;} } .fields li.mobile-half input.input{width:100%}编辑页面CSS:mobile-half |
| 4 | 两列和三列并排显示的代码 | @media screen and (max-width: 768px){ .fields li.mobile-half{ float: left;width: 50%; clear: none;box-sizing: border-box;} .fields li.mobile-half::after{content: none;} } .fields li.mobile-half input.input{width:100%}@media screen and (max-width: 768px) { .fields li.mobile-three{ float: left;width: 33.3333%; clear: none;box-sizing: border-box;} .fields li.mobile-three::after{content: none;} }.fields li.mobile-three input.inpu{width:100%}编辑页面CSS:mobile-three |
| 5 | 隐藏商品字段的最下方的商品金额代码 | #shopping_cart .content{display:none} |
| 6 | 字段名称和输入框在手机端左右显示 | 皮肤：.my-row:after{content:””;display:table;clear:both;} .my-row .desc{float:left;width:30%;margin:0;line-height:40px;} .my-row .content{float:left;width:70%;} CSS:my-row |
| 7 | 自定义提交按钮的样式–圆弧形 | #btnSubmit{ border-radius:40px } |
| 8 | 隐藏表单名称代码 | .info{display:none;} .myclass1{ color:#b20203; background-color:#a1e4f2; font-size:18px; font-weight:bold; border-left-style:solid border-left-width:15px; border-left-color:#439daf;} .myclass11{ color:white; background-color:red font-size:16px; line-height:150%; letter-spacing:2px; } |
| 9 | 隐藏填表页面库存显示样式 | http://#5f1fbb67fc918f7b85d70f04 .residue{ display:none!important } |
| 10 | 文本框滚动 | 自定义样式：.description {line-height:200%; height:150px; margin-bottom:20px!important; overflow:scroll;} CSS:description |
| 11 | 视频在电脑/手机端全屏 | li[typ=vedio] iframe {height:340px !important;} |
| 12 | 表单里面插入的表单文字在手机上一行显示 | 皮肤页面：table.nwtable tbody>tr>td:first-child {white-space: nowrap;} |
| 13 | 描述文字内容滚动查看 | .description {line-height:200%; height:150px; margin-bottom:20px!important; overflow:scroll;}编辑页面：description |
| 14 | 描述文字内容滚动查看 | 自定义样式:.sectiontitle .desc{ color: #1663c7;font-size:16px;border-top-color:#1663c7} .collhide{position:absolute!important;clip:rect(0,0,0,0)}.self-bgColor{background:lightgrey;}. description {line-height:200%;height:150px; margin-bottom:20px!important; overflow:scroll;} 表单编辑页面： description |
| 15 | 自定义单选的字体大小 | 皮肤：.myclass .content span { font-size: 150%;} CSS:myclass |
| 16 | 调整商品图片大小一致 | .goods-item .image-center{height: 95px;}.goods-item .img{height: 94px;} @media screen and (max-width: 750px){.goods-item .image-center{height: 100px;}.goods-item .img{height: 100%;object-fit: contain;}} |
| 17 | 表单嵌入网页，页面显示和电脑同步的宽度 | .share{display:none;} .container{width:100%;} |
| 18 | 数字字段控制商品金额的脚本 | setInterval(function(){ var aco = $(“input[name=’F26_number’]”).val();if(aco){ $(“input[name=’F12_goods’]”).val(aco); calShopCard();}},200) |
| 19 | 隐藏商品字段的css样式 | 自定义样式:.hidegoods{ position:absolute!important; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0);} CSS:hidegoods |
| 20 | 描述文字内容滚动查看网址 | CSS:.description {line-height:200%; height:150px; margin-bottom:20px!important; overflow:scroll;} 编辑页面：description |
| 21 | 输入框椭圆形的CSS样式 | 皮肤页面：.newcss{display:flex} .newcss .desc{line-height: 40px; padding-right: 10px;} .newcss .input{border:1px solid #fb701b;border-radius:20px;} .newcss .content{flex:1} 表单编辑页 CSS : newcss |
| 22 | 缩短字符间距的CSS样式 | .fields>li{padding:0 16px!important} .desc{padding:0!important} |
| 23 | 提交按钮位置 | PC端： .pc-submit {top: -260px;} 移动手机端： @media screen and (max-width : 900px) { .pc-submit { top:-188px;}} ———–移动手机端的高度需要慢慢调整，手机端屏幕大小不一也不能完全自适应 |
| 24 | 调整图片展示大小的样式 | @media all and (max-width:768px){ #fields>li[typ=image] .img-box .display-img{ height:50px!important; object-fit: contain;}} |
| 25 | 调整字段不可编辑背景色为透明的样式 | .fields input[readonly]{background:transparent;} |
| 26 | 调整输入框字体的大小 | input.fld[name=F4] { color: #333; font-size: 18px; font-weight: 600;} F4是对应字段的字段值，可以更换 |
| 27 | 调整两个字段之间的间距 | 编辑页面：第一个字段inrow 第二个字段 inrow nopad 自定义样式页面：.inrow{display: inline-block; line-height: 30px;width: auto!important;padding-right: 0!important;}.inrow.nopad{padding-left:0!important} |
| 28 | 多选框4个选项一行显示4个选项 | @media all and (max-width:768px){ li[typ=radio] .goods-item, li[typ=checkbox] .goods-item{ padding: 5px;width: 25%;margin-bottom: 0;} li[typ=radio] .goods-item .image-center, li[typ=checkbox] .goods-item .image-center{margin-left: 0;width: 100%;padding-bottom: 100%;} .text-wrapper>label{margin-left: 0!important;} .content .fldlabeltxt{font-size: 13px;}}@media all and (min-width:769px){li[typ=radio] .goods-item, li[typ=checkbox] .goods-item{width: 148px;}li[typ=radio] .goods-item .image-center, li[typ=checkbox] .goods-item .image-center{width: 142px;}} |
| 29 | 提交按钮，悬浮显示 | @media all and (max-width:768px){.fields{padding-bottom: 40px!important;}.pc-submit{position: fixed!important;z-index: 1000;left: 0;bottom: 0;right: 0;padding: 0!important;margin: 0!important;}} |
| 30 | 表单全屏幕宽度的CSS | @media all and ( min-width:768px ) {.container{width: calc(100% - 48px)!important;}#cornerQrcode{display: none;}} |
如果你有CSS编程经验，可以在此自己定义CSS样式，并在表单设计时在字段上加上对应的CSS属性。也可以联系我们的客服人员去帮你实现你想要的样式效果。
背景设置
设置页面背景，纯色或自定义上传背景图片。
总结
后面会给大家分享更多填表的一些小技巧，欢迎大家关注。