What are the characteristics of Web form beautification CSS framework Topcoat
This article mainly introduces "what are the characteristics of Web form beautification CSS framework Topcoat". In daily operation, I believe that many people have doubts about the characteristics of Web form beautification CSS framework Topcoat. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the question of "what are the characteristics of Web form beautification CSS framework Topcoat?" Next, please follow the editor to study!
Topcoat is also a simple Web form construction application. Unlike CSS frameworks such as Semantic UI and BootMetro, Topcoat is mainly used to build beautified Web forms, including submit buttons, input boxes, radio boxes / check boxes, sliders, search boxes and other form elements.
Characteristics of Topcoat
Small, simple and easy to use
Focus on the design of form elements, each of which is very beautiful
Support mobility, so that these form elements also have a good effect on the mobile side.
Topcoat related component instance
Button
Take the blue button as an example, the relevant code is as follows:
HTML
Button Button CSS .topical-button--large--cta {font-size: 0.875remr; font-weight: 600; line-height: 1.688remr; padding: 00.875remr;} input [type= "checkbox"] {position: absolute; overflow: hidden; padding: 0; border: 0; opacity: 0.001; z-index: 1; vertical-align: top; outline: none;} .checkbox {- moz-box-sizing: border-box Box-sizing: border-box; background-clip: padding-box; position: relative; display: inline-block; vertical-align: top; cursor: default;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;} .checkbox _ _ label {position: relative; display: inline-block; vertical-align: top; cursor: default;-webkit-user-select: none -moz-user-select: none;-ms-user-select: none; user-select: none;} .checkbox-- disabled {opacity: 0.3; cursor: default; pointer-events: none;} .checkbox: before, .checkbox: after {content:'; position: absolute;} .checkbox: before {- moz-box-sizing: border-box; box-sizing: border-box; background-clip: padding-box } input [type= "checkbox"] {position: absolute; overflow: hidden; padding: 0; border: 0; opacity: 0.001; z-index: 1; vertical-align: top; outline: none;} .checkbox, .topcoat-checkbox__checkmark {- moz-box-sizing: border-box; box-sizing: border-box; background-clip: padding-box; position: relative; display: inline-block; vertical-align: top; cursor: default -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;} .checkbox _ _ label, .topcoat-checkbox {position: relative; display: inline-block; vertical-align: top; cursor: default;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none } .checkbox-- disabled, input [type= "checkbox"]: disabled + .topcoat-checkbox__checkmark {opacity: 0.3; cursor: default; pointer-events: none;} .checkbox: before, .checkbox: after, .topcoat-checkbox__checkmark:before, .topcoat-checkbox__checkmark:after {content:'; position: absolute;} .checkbox: before, .topcoat-checkbox__checkmark:before {- moz-box-sizing: border-box Box-sizing: border-box; background-clip: padding-box;}
Checkbox / checkbox
Take the checkbox as an example, the relevant code is as follows:
HTML
Left label
Right label
Disabled CSS: input [type= "radio"] {height: 1.063; width: 1.063; margin-top: 0; margin-right:-1.063; margin-bottom:-1.063; margin-left: 0;} input [type= "radio"]: checked + .topical-radio-button__checkmark:after {opacity: 1;} .topical-radio-button {color: # c6c8c8; line-height: 1.063rem Radio-button__checkmark:before {width: 1.063; height: 1.063; background: # 595b5b; border: 1px solid # 333434; box-shadow: inset 0 1px # 737373;} .topical-radio-button__checkmark {position: relative; width: 1.063; height: 1.063;} .topical-radio-button__checkmark:after {opacity: 0; width: 0.313; height: 0.313; background: # c6c8c8 Border: 1px solid rgba; box-shadow: 0 1px rgba;-webkit-transform: none;-ms-transform: none; transform: none; top: 0.313remr; left: 0.313remr;} input [type= "radio"]: focus + .topical-radio-button__checkmark:before {border: 1px solid # 0036ff; box-shadow: inset 0 1px rgba (255Med 255 0.36), 00 2px # 6fb5f1 } input [type= "radio]: active + .topical-radio-button__checkmark:before {border: 1px solid # 333434; background-color: # 3f4041; box-shadow: inset 0 1px rgba;} input [type=" radio "]: disabled:active + .topical-radio-button__checkmark:before {border: 1px solid # 333434; background: # 595b5b; box-shadow: inset 0 1px # 7373;} .range {padding: 0; margin: 0 Font: inherit; color: inherit; background: transparent; border: none;-moz-box-sizing: border-box; box-sizing: border-box; background-clip: padding-box; vertical-align: top; outline: none;-webkit-appearance: none;} .range _ thumb {cursor: pointer;} .range _ thumb--webkit {cursor: pointer;-webkit-appearance: none;} .range: disabled {opacity: 0.3; cursor: default Pointer-events: none;} .range, .topcoat-range {padding: 0; margin: 0; font: inherit; color: inherit; background: transparent; border: none;-moz-box-sizing: border-box; box-sizing: border-box; background-clip: padding-box; vertical-align: top; outline: none;-webkit-appearance: none;} .range _ thumb, .topical-range::-moz-range-thumb {cursor: pointer } .range _ thumb--webkit, .topical-range::-webkit-slider-thumb {cursor: pointer;-webkit-appearance: none;} .range: disabled, .topcoat-range:disabled {opacity: 0.3; cursor: default; pointer-events: none;} at this point, the study on "what are the characteristics of Web form beautification CSS framework Topcoat" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
