Web表单美化CSS框架Topcoat

Topcoat的特点

• 小巧、简单、易用

• 专注表单元素设计，每一个表单元素都非常精美

• 支持移动化，让这些表单元素在移动端同样有着不错的效果

Topcoat相关组件实例

按钮

以蓝色按钮为例，相关代码如下：

HTML

1. <button class="topcoat-button--large--cta" >Button</button> 
2. <button class="topcoat-button--large--cta" disabled>Button</button> 
3.  
4. CSS 
5.  
6. .topcoat-button--large--cta { 
7.   font-size: 0.875rem; 
8.   font-weight: 600; 
9.   line-height: 1.688rem; 
10.   padding: 0 0.875rem; 
11. } 
12.  
13. input[type="checkbox"] { 
14.   position: absolute; 
15.   overflow: hidden; 
16.   padding: 0; 
17.   border: 0; 
18.   opacity: 0.001; 
19.   z-index: 1; 
20.   vertical-align: top; 
21.   outline: none; 
22. } 
23.  
24. .checkbox { 
25.   -moz-box-sizing: border-box; 
26.   box-sizing: border-box; 
27.   background-clip: padding-box; 
28.   position: relative; 
29.   display: inline-block; 
30.   vertical-align: top; 
31.   cursor: default; 
32.   -webkit-user-select: none; 
33.   -moz-user-select: none; 
34.   -ms-user-select: none; 
35.   user-select: none; 
36. } 
37.  
38. .checkbox__label { 
39.   position: relative; 
40.   display: inline-block; 
41.   vertical-align: top; 
42.   cursor: default; 
43.   -webkit-user-select: none; 
44.   -moz-user-select: none; 
45.   -ms-user-select: none; 
46.   user-select: none; 
47. } 
48.  
49. .checkbox--disabled { 
50.   opacity: 0.3; 
51.   cursor: default; 
52.   pointer-events: none; 
53. } 
54.  
55. .checkbox:before, 
56. .checkbox:after { 
57.   content: ''; 
58.   position: absolute; 
59. } 
60.  
61. .checkbox:before { 
62.   -moz-box-sizing: border-box; 
63.   box-sizing: border-box; 
64.   background-clip: padding-box; 
65. } 
66.  
67. input[type="checkbox"] { 
68.   position: absolute; 
69.   overflow: hidden; 
70.   padding: 0; 
71.   border: 0; 
72.   opacity: 0.001; 
73.   z-index: 1; 
74.   vertical-align: top; 
75.   outline: none; 
76. } 
77.  
78. .checkbox, 
79. .topcoat-checkbox__checkmark { 
80.   -moz-box-sizing: border-box; 
81.   box-sizing: border-box; 
82.   background-clip: padding-box; 
83.   position: relative; 
84.   display: inline-block; 
85.   vertical-align: top; 
86.   cursor: default; 
87.   -webkit-user-select: none; 
88.   -moz-user-select: none; 
89.   -ms-user-select: none; 
90.   user-select: none; 
91. } 
92.  
93. .checkbox__label, 
94. .topcoat-checkbox { 
95.   position: relative; 
96.   display: inline-block; 
97.   vertical-align: top; 
98.   cursor: default; 
99.   -webkit-user-select: none; 
100.   -moz-user-select: none; 
101.   -ms-user-select: none; 
102.   user-select: none; 
103. } 
104.  
105. .checkbox--disabled, 
106. input[type="checkbox"]:disabled + .topcoat-checkbox__checkmark { 
107.   opacity: 0.3; 
108.   cursor: default; 
109.   pointer-events: none; 
110. } 
111.  
112. .checkbox:before, 
113. .checkbox:after, 
114. .topcoat-checkbox__checkmark:before, 
115. .topcoat-checkbox__checkmark:after { 
116.   content: ''; 
117.   position: absolute; 
118. } 
119.  
120. .checkbox:before, 
121. .topcoat-checkbox__checkmark:before { 
122.   -moz-box-sizing: border-box; 
123.   box-sizing: border-box; 
124.   background-clip: padding-box; 
125. } 

单选框/复选框

以单选框为例，相关代码如下：

1. HTML 
2.  
3. <!-- NO LABEL --> 
4. <label class="topcoat-radio-button"> 
5.   <input type="radio" name="topcoat"> 
6.   <div class="topcoat-radio-button__checkmark"></div> 
7. </label> 
8. <br> 
9. <br> 
10. <!-- LEFT LABEL --> 
11. <label class="topcoat-radio-button"> 
12.   Left label 
13.   <input type="radio" name="topcoat"> 
14.   <div class="topcoat-radio-button__checkmark"></div> 
15. </label> 
16. <br> 
17. <br> 
18. <!-- RIGHT LABEL --> 
19. <label class="topcoat-radio-button"> 
20.   <input type="radio" name="topcoat"> 
21.   <div class="topcoat-radio-button__checkmark"></div> 
22.   Right label 
23. </label> 
24. <br> 
25. <br> 
26. <!-- DISABLED --> 
27. <label class="topcoat-radio-button"> 
28.   <input type="radio" name="topcoat" Disabled> 
29.   <div class="topcoat-radio-button__checkmark"></div> 
30.   Disabled 
31. </label> 
32.  
33. CSS： 
34.  
35. input[type="radio"] { 
36.   height: 1.063rem; 
37.   width: 1.063rem; 
38.   margin-top: 0; 
39.   margin-right: -1.063rem; 
40.   margin-bottom: -1.063rem; 
41.   margin-left: 0; 
42. } 
43.  
44. input[type="radio"]:checked + .topcoat-radio-button__checkmark:after { 
45.   opacity: 1; 
46. } 
47.  
48. .topcoat-radio-button { 
49.   color: #c6c8c8; 
50.   line-height: 1.063rem; 
51. } 
52.  
53. .topcoat-radio-button__checkmark:before { 
54.   width: 1.063rem; 
55.   height: 1.063rem; 
56.   background: #595b5b; 
57.   border: 1px solid #333434; 
58.   box-shadow: inset 0 1px #737373; 
59. } 
60.  
61. .topcoat-radio-button__checkmark { 
62.   position: relative; 
63.   width: 1.063rem; 
64.   height: 1.063rem; 
65. } 
66.  
67. .topcoat-radio-button__checkmark:after { 
68.   opacity: 0; 
69.   width: 0.313rem; 
70.   height: 0.313rem; 
71.   background: #c6c8c8; 
72.   border: 1px solid rgba(0,0,0,0.05); 
73.   box-shadow: 0 1px rgba(255,255,255,0.1); 
74.   -webkit-transform: none; 
75.   -ms-transform: none; 
76.   transform: none; 
77.   top: 0.313rem; 
78.   left: 0.313rem; 
79. } 
80.  
81. input[type="radio"]:focus + .topcoat-radio-button__checkmark:before { 
82.   border: 1px solid #0036ff; 
83.   box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1; 
84. } 
85.  
86. input[type="radio"]:active + .topcoat-radio-button__checkmark:before { 
87.   border: 1px solid #333434; 
88.   background-color: #3f4041; 
89.   box-shadow: inset 0 1px rgba(0,0,0,0.05); 
90. } 
91.  
92. input[type="radio"]:disabled:active + .topcoat-radio-button__checkmark:before { 
93.   border: 1px solid #333434; 
94.   background: #595b5b; 
95.   box-shadow: inset 0 1px #737373; 
96. } 
97.  
98. .range { 
99.   padding: 0; 
100.   margin: 0; 
101.   font: inherit; 
102.   color: inherit; 
103.   background: transparent; 
104.   border: none; 
105.   -moz-box-sizing: border-box; 
106.   box-sizing: border-box; 
107.   background-clip: padding-box; 
108.   vertical-align: top; 
109.   outline: none; 
110.   -webkit-appearance: none; 
111. } 
112.  
113. .range__thumb { 
114.   cursor: pointer; 
115. } 
116.  
117. .range__thumb--webkit { 
118.   cursor: pointer; 
119.   -webkit-appearance: none; 
120. } 
121.  
122. .range:disabled { 
123.   opacity: 0.3; 
124.   cursor: default; 
125.   pointer-events: none; 
126. } 
127.  
128. .range, 
129. .topcoat-range { 
130.   padding: 0; 
131.   margin: 0; 
132.   font: inherit; 
133.   color: inherit; 
134.   background: transparent; 
135.   border: none; 
136.   -moz-box-sizing: border-box; 
137.   box-sizing: border-box; 
138.   background-clip: padding-box; 
139.   vertical-align: top; 
140.   outline: none; 
141.   -webkit-appearance: none; 
142. } 
143.  
144. .range__thumb, 
145. .topcoat-range::-moz-range-thumb { 
146.   cursor: pointer; 
147. } 
148.  
149. .range__thumb--webkit, 
150. .topcoat-range::-webkit-slider-thumb { 
151.   cursor: pointer; 
152.   -webkit-appearance: none; 
153. } 
154.  
155. .range:disabled, 
156. .topcoat-range:disabled { 
157.   opacity: 0.3; 
158.   cursor: default; 
159.   pointer-events: none; 
160. } 

更多关于Topcoat的组件，大家可以前往其官方网站进行学习。

作者：佚名

来源：51CTO