Web表单美化CSS框架Topcoat

Topcoat同样是一款简洁的Web表单构建应用，和Semantic UI、BootMetro等CSS框架不同的是，Topcoat主要用于构建美化的Web表单，包括提交按钮、输入框、单选框/复选框、滑动杆、搜索框等表单元素。

Topcoat的特点

• 小巧、简单、易用

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

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

Topcoat相关组件实例

按钮

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

HTML

<button class="topcoat-button--large--cta" >Button</button> 


<button class="topcoat-button--large--cta" disabled>Button</button> 


 


CSS 


 


.topcoat-button--large--cta { 


  font-size: 0.875rem; 


  font-weight: 600; 


  line-height: 1.688rem; 


  padding: 0 0.875rem; 


} 


 


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; 


} 

单选框/复选框

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