如何寫好CSS系列之表單(form)

時間 2019-11-07

標籤如何寫好 css 系列表單 form 欄目 CSS 简体版

原文原文鏈接

本文轉載於:猿2048網站如何寫好CSS系列之表單(form)php

表單模塊能夠分爲兩部分：一是表單的佈局，也就是規範表單元素單元的排列位置；二是表單元素，如：輸入框、單選、複選、列表組件、搜索組件等，因爲列表組件、搜索組件不是單純的css組件，因此暫且沒有實現。css

1、表單佈局的實現

表單佈局分爲：表單容器、行、表單元素組（包含元素標題、元素）。而且實現根據屏幕進行自適應。示例效果以下：web

從示例效果能夠看出，佈局會根據瀏覽器大小實現自適應。自適應代碼以下：瀏覽器

@import '../mixins/breakpoints';

.f-form-container{
    @extend .border-sizing;
    margin-top: $form-row-space;
    > .f-form-row{
        display: block;   
        white-space: nowrap;
        margin: 0px;
        padding: 0px;  
        font-size: 0px;   
    }
    > .f-form-row + .f-form-row{
        margin-top: $form-row-space;
    }

    &.fluid{
        //自適應 xs = md -1
        @include media-breakpoint-max('xs'){
            .f-form-group{
                display: block;
                margin: 0px;
                + .f-form-group{
                    margin-top: get-space(lg);
                }
            }
        }
    }
}

首先對容器內部的f-form-row（表單行）進行了Magin-top的設置。而後增長了fluid類名，用於控制此表單列表是否須要支持自適應效果。佈局

2、表單元素的實現（部分）

表單元素只實現的input、checkbox、radio等三個基本元素類型。字體

2.1 input元素

對Input元素主要實現了前綴和後綴的能力，其中先後綴中的內容能夠任意寬度，如今引入的爲font-awesome的web字體庫。其實check和radio的圖標也是來至於font-awesome。代碼以下：網站

.f-form-control{
    display: inline-block;
    width: 100%;
    padding: $form-input-padding;
    border: 1px solid $form-border-color;
    font-family: $font-family;
    font-size: $font-size;
    line-height: $line-height;
    border-radius: $radius-width-base;
    outline: none;
    resize: none;
    &:focus{
        border-color: $form-border-focuscolor;
    }
}
.f-input-addon{
    //圖標
    display: inline-block;
    font-size: $font-size;
    //line-height能夠解決兩個inline-block高度不致的問題（字體類型不同的狀況下）
    line-height: $line-height;
    padding: $form-input-padding;
    border: 1px solid $form-border-color;
    background-clip: padding-box;
    &:after{
        //解決fa與輸入框字體一致的問題
        content: '';
        display: inline-block;
    }
}

//addon position
.f-form-group{     
    &.addon-before{
        .f-input-addon{
            border-radius: $radius-width-base;
            border-right-width: 0px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
        }
        .f-form-control{
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px; 
        }
    }
    &.addon-after{
        .f-input-addon{
            border-radius: $radius-width-base;
            border-left-width: 0px;
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
        }
        .f-form-control{
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
        }
    }
}

//處理input寬度佔了100%的問題
.f-form-group{
    &.addon-before, &.addon-after{
        display: inline-table;
        .f-input-addon, .f-form-control{
            display: table-cell;
        } 
    }
}

其中遇到兩個比較棘手的問題處理方案：ui

1. addon和control兩個字體類型不致，致使在相同字體大小的狀況下，兩個容器的高度表現不一致。因此我就用了行高(line-height)來解決此問題spa

2. 因爲control默認的寬度爲100%，而加入了addon以後，會致使control的寬度溢出的現象，因此我就用了table-cell來解決此問題。code

2.2. checkbox和radio元素

示例代碼只列出了checkbox的，其radio與此相同，就只改變了圖標而已：

.f-form-control{
    &.checkbox{
        > input{
            display: none;
            &:checked{
                + .checkbox-icon{
                    @extend .fa-check-square-o;
                }
            }
        }
        > .checkbox-icon{
            @extend .vertical-middle;
            @extend .fa;
            @extend .fa-square-o;
            width: 16px;
            height: 16px;
            font-size: $font-size-md;
            margin-right: get-space('lg');
        }
        > .checkbox-desc{
            font-size: $font-size;
            @extend .vertical-middle;
        }
    }
}