How to Write a CSS form (form) and a css form

How to Write a CSS form (form) and a css form

The form module can be divided into two parts: one is the layout of the form, that is, the arrangement position of the elements in the canonicalized form; the other is the form elements, such: input box, single choice, check, list component, Search Component, etc. Because the list component and search component are not pure css components, they are not implemented yet.

I. Implementation of form layout

Form la s are divided into Form containers, rows, and form Element groups (including element titles and elements ). In addition, it can adapt to the screen. The following is an example:

The following figure shows that the layout is adaptive to the browser size. The adaptive code is as follows:

@ 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 {// adaptive xs = md-1 @ include media-breakpoint-max ('xs '){. f-form-group {display: block; margin: 0px; +. f-form-group {margin-top: get-space (lg );}}}}}

First, set the f-form-row (form row) inside the container to Magin-top. The fluid class name is added to control whether the form List must support adaptive effects.

II. Implementation of form elements (Part)

Form elements only implement three basic element types: input, checkbox, and radio.

2.1 input element

The prefix and suffix of the Input element are implemented. The content in the prefix and suffix can be any width. The web library font-awesome is introduced now. In fact, the check and radio icons are also for font-awesome. The Code is as follows:

. 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 {// icon display: inline-block; font-size: $ font-size; // line-height can solve the problem that the height of two inline-blocks is not good (when the font type is different) line-height: $ line-height; padding: $ form-input-padding; border: 1px solid $ form-border-color; background-clip: padding-box ;&: after {// solve the font consistency problem between fa and the input box. 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 ;}}// handle the problem where the input width accounts for 100%. f-form-group {&. addon-before ,&. addon-after {display: inline-table ;. f-input-addon ,. f-form-control {display: table-cell ;}}}

There are two difficult solutions:

1. The Font types addon and control are different. As a result, the height of the two containers varies with the font size. So I used line-height to solve this problem.

2. Because the default control width is 100% and addon is added, the control width overflows. Therefore, table-cell is used to solve this problem.

2.2. checkbox and radio Elements

The sample code only lists the checkbox, and its radio is the same as this, only the icon is changed:

.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;        }    }}

Because the font-awesome library is introduced, the icon width is controlled. Because the checkbox is selected and the status is not selected, the width of the corresponding icon in the fa web library is different.

Source code download