皮膚設(shè)計和自定義CSS
這篇文章將教你幾招對表單各種樣式的優(yōu)化，迅速提升表單的顏值，讓它變得更好看，增加辨識度塑造品牌個性。
模板庫
純色皮膚
共有8款主流的純色皮膚可供選擇，表單的結(jié)構(gòu)(表頭/字段/按鈕等)會跟隨它的樣式來改變。
主題皮膚
提供了8種按顏色風(fēng)格分類的主題皮膚，每個顏色分類下有幾十款皮膚模板，點擊即可一鍵切換。
共享皮膚
將自己設(shè)計的皮膚共享給團隊的其他人使用，有以下兩種使用方式：
引用
此表單將與其它表單一起共享此皮膚，細節(jié)設(shè)定時，將影響所有使用此皮膚的表單，一般在多個表單需要統(tǒng)一風(fēng)格時選擇此選項。復(fù)制
系統(tǒng)將復(fù)制一份皮膚至當(dāng)前表單，細節(jié)設(shè)定時，不影響使用此皮膚的其它表單，一般在多個表單需要不同的風(fēng)格時選擇此選項。
自定義
如果您喜歡 DIY或?qū)Ρ韱纹つw有更高的要求，可以再選擇純色或者主題皮膚后進行個性化自定義設(shè)計。
表頭設(shè)置
表頭可自定義上傳圖片、純色、無。自定義圖片支持編輯裁剪，調(diào)整高度或拉伸顯示方式。
表體設(shè)置
表體可自定義的細節(jié)非常豐富，包含表單的背景色、文字、提交按鈕以、字段按鈕、邊框、自定義樣式等。
這里著重介紹下表體中的自定義樣式功能，有兩種實現(xiàn)方式：
1.覆蓋原有CSS名稱。系統(tǒng)會為每個組件設(shè)置默認的CSS樣式名稱，你可以重寫這些樣式。
2、定義新的CSS名稱，然后在表單設(shè)計器中指定使用該名稱。
另外表姐整理了非常多的 CSS樣式代碼庫，可以實現(xiàn)很豐富的頁面效果。比如字段在手機并排、兩列或三列顯示，隱藏商品字段商品金額，文本框滾動，自定義提交按鈕圓角弧度，或者隱藏表單名稱等，這個功能非常靈活。
| ID | 名稱 | 備注 |
|---|---|---|
| 1 | 輸入框居中、整個字段居中 | 自定義皮膚 .input-center{text-align:center} 編輯頁面CSS input-center |
| 2 | 組合單選框行標(biāo)簽左對齊代碼 | 自定義皮膚：.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 | 描述文字內(nèi)容滾動查看 | .description {line-height:200%; height:150px; margin-bottom:20px!important; overflow:scroll;}編輯頁面：description |
| 14 | 描述文字內(nèi)容滾動查看 | 自定義樣式:.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 | 調(diào)整商品圖片大小一致 | .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 | 表單嵌入網(wǎng)頁，頁面顯示和電腦同步的寬度 | .share{display:none;} .container{width:100%;} |
| 18 | 數(shù)字字段控制商品金額的腳本 | 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 | 描述文字內(nèi)容滾動查看網(wǎng)址 | CSS:.description {line-height:200%; height:150px; margin-bottom:20px!important; overflow:scroll;} 編輯頁面：description |
| 21 | 輸入框橢圓形的CSS樣式 | .newcss .input{border-radius:20px;} |
| 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;}} ———–移動手機端的高度需要慢慢調(diào)整，手機端屏幕大小不一也不能完全自適應(yīng) |
| 24 | 調(diào)整圖片展示大小的樣式 | @media all and (max-width:768px){ #fields>li[typ=image] .img-box .display-img{ height:50px!important; object-fit: contain;}} |
| 25 | 調(diào)整字段不可編輯背景色為透明的樣式 | .fields input[readonly]{background:transparent;} |
| 26 | 調(diào)整輸入框字體的大小 | input.fld[name=F4] { color: #333; font-size: 18px; font-weight: 600;} F4是對應(yīng)字段的字段值，可以更換 |
| 27 | 調(diào)整兩個字段之間的間距 | 編輯頁面：第一個字段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編程經(jīng)驗，可以在此自己定義CSS樣式，并在表單設(shè)計時在字段上加上對應(yīng)的CSS屬性。也可以聯(lián)系我們的客服人員去幫你實現(xiàn)你想要的樣式效果。
背景設(shè)置
設(shè)置頁面背景，純色或自定義上傳背景圖片。
總結(jié)
后面會給大家分享更多填表的一些小技巧，歡迎大家關(guān)注。