Shulou(Shulou.com)06/02 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.