欢迎访问 licqi IT技术
我们一直在努力

Web表单美化CSS框架Topcoat

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

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. input[type="checkbox"] { 
  13.   position: absolute; 
  14.   overflow: hidden; 
  15.   padding: 0
  16.   border: 0
  17.   opacity: 0.001
  18.   z-index: 1
  19.   vertical-align: top; 
  20.   outline: none; 
  21.  
  22. .checkbox { 
  23.   -moz-box-sizing: border-box; 
  24.   box-sizing: border-box; 
  25.   background-clip: padding-box; 
  26.   position: relative; 
  27.   display: inline-block; 
  28.   vertical-align: top; 
  29.   cursor: default
  30.   -webkit-user-select: none; 
  31.   -moz-user-select: none; 
  32.   -ms-user-select: none; 
  33.   user-select: none; 
  34.  
  35. .checkbox__label { 
  36.   position: relative; 
  37.   display: inline-block; 
  38.   vertical-align: top; 
  39.   cursor: default
  40.   -webkit-user-select: none; 
  41.   -moz-user-select: none; 
  42.   -ms-user-select: none; 
  43.   user-select: none; 
  44.  
  45. .checkbox--disabled { 
  46.   opacity: 0.3
  47.   cursor: default
  48.   pointer-events: none; 
  49.  
  50. .checkbox:before, 
  51. .checkbox:after { 
  52.   content: ''
  53.   position: absolute; 
  54.  
  55. .checkbox:before { 
  56.   -moz-box-sizing: border-box; 
  57.   box-sizing: border-box; 
  58.   background-clip: padding-box; 
  59.  
  60. input[type="checkbox"] { 
  61.   position: absolute; 
  62.   overflow: hidden; 
  63.   padding: 0
  64.   border: 0
  65.   opacity: 0.001
  66.   z-index: 1
  67.   vertical-align: top; 
  68.   outline: none; 
  69.  
  70. .checkbox, 
  71. .topcoat-checkbox__checkmark { 
  72.   -moz-box-sizing: border-box; 
  73.   box-sizing: border-box; 
  74.   background-clip: padding-box; 
  75.   position: relative; 
  76.   display: inline-block; 
  77.   vertical-align: top; 
  78.   cursor: default
  79.   -webkit-user-select: none; 
  80.   -moz-user-select: none; 
  81.   -ms-user-select: none; 
  82.   user-select: none; 
  83.  
  84. .checkbox__label, 
  85. .topcoat-checkbox { 
  86.   position: relative; 
  87.   display: inline-block; 
  88.   vertical-align: top; 
  89.   cursor: default
  90.   -webkit-user-select: none; 
  91.   -moz-user-select: none; 
  92.   -ms-user-select: none; 
  93.   user-select: none; 
  94.  
  95. .checkbox--disabled, 
  96. input[type="checkbox"]:disabled + .topcoat-checkbox__checkmark { 
  97.   opacity: 0.3
  98.   cursor: default
  99.   pointer-events: none; 
  100.  
  101. .checkbox:before, 
  102. .checkbox:after, 
  103. .topcoat-checkbox__checkmark:before, 
  104. .topcoat-checkbox__checkmark:after { 
  105.   content: ''
  106.   position: absolute; 
  107.  
  108. .checkbox:before, 
  109. .topcoat-checkbox__checkmark:before { 
  110.   -moz-box-sizing: border-box; 
  111.   box-sizing: border-box; 
  112.   background-clip: padding-box; 

单选框/复选框

以单选框为例,相关代码如下:

  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.   height1.063rem; 
  37.   width1.063rem; 
  38.   margin-top0
  39.   margin-right-1.063rem; 
  40.   margin-bottom-1.063rem; 
  41.   margin-left0
  42.  
  43. input[type="radio"]:checked + .topcoat-radio-button__checkmark:after { 
  44.   opacity: 1
  45.  
  46. .topcoat-radio-button { 
  47.   color#c6c8c8
  48.   line-height1.063rem; 
  49.  
  50. .topcoat-radio-button__checkmark:before { 
  51.   width1.063rem; 
  52.   height1.063rem; 
  53.   background#595b5b
  54.   border1px solid #333434
  55.   box-shadow: inset 0 1px #737373
  56.  
  57. .topcoat-radio-button__checkmark { 
  58.   positionrelative
  59.   width1.063rem; 
  60.   height1.063rem; 
  61.  
  62. .topcoat-radio-button__checkmark:after { 
  63.   opacity: 0
  64.   width0.313rem; 
  65.   height0.313rem; 
  66.   background#c6c8c8
  67.   border1px solid rgba(0,0,0,0.05); 
  68.   box-shadow: 0 1px rgba(255,255,255,0.1); 
  69.   -webkit-transform: none
  70.   -ms-transform: none
  71.   transform: none
  72.   top: 0.313rem; 
  73.   left: 0.313rem; 
  74.  
  75. input[type="radio"]:focus + .topcoat-radio-button__checkmark:before { 
  76.   border1px solid #0036ff
  77.   box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1
  78.  
  79. input[type="radio"]:active + .topcoat-radio-button__checkmark:before { 
  80.   border1px solid #333434
  81.   background-color#3f4041
  82.   box-shadow: inset 0 1px rgba(0,0,0,0.05); 
  83.  
  84. input[type="radio"]:disabled:active + .topcoat-radio-button__checkmark:before { 
  85.   border1px solid #333434
  86.   background#595b5b
  87.   box-shadow: inset 0 1px #737373
  88.  
  89. .range { 
  90.   padding0
  91.   margin0
  92.   font: inherit; 
  93.   color: inherit; 
  94.   backgroundtransparent
  95.   bordernone
  96.   -moz-box-sizing: border-box; 
  97.   box-sizing: border-box; 
  98.   background-clip: padding-box; 
  99.   vertical-aligntop
  100.   outlinenone
  101.   -webkit-appearance: none
  102.  
  103. .range__thumb { 
  104.   cursorpointer
  105.  
  106. .range__thumb--webkit { 
  107.   cursorpointer
  108.   -webkit-appearance: none
  109.  
  110. .range:disabled { 
  111.   opacity: 0.3
  112.   cursordefault
  113.   pointer-events: none
  114.  
  115. .range, 
  116. .topcoat-range { 
  117.   padding0
  118.   margin0
  119.   font: inherit; 
  120.   color: inherit; 
  121.   backgroundtransparent
  122.   bordernone
  123.   -moz-box-sizing: border-box; 
  124.   box-sizing: border-box; 
  125.   background-clip: padding-box; 
  126.   vertical-aligntop
  127.   outlinenone
  128.   -webkit-appearance: none
  129.  
  130. .range__thumb, 
  131. .topcoat-range::-moz-range-thumb { 
  132.   cursorpointer
  133.  
  134. .range__thumb--webkit, 
  135. .topcoat-range::-webkit-slider-thumb { 
  136.   cursorpointer
  137.   -webkit-appearance: none
  138.  
  139. .range:disabled, 
  140. .topcoat-range:disabled { 
  141.   opacity: 0.3
  142.   cursordefault
  143.   pointer-events: none

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

【编辑推荐】

  1. 基于EasyUI的Web应用程序及过去一年的总结
  2. Web前端开发与iOS终端开发的异同
  3. 这就是我不想成为Web前端程序员理由
  4. 25个超有用的 AngularJS Web 开发工具
  5. 基于HTML5的CSS框架组件BootFlat
  6. 最新最热门的Web前端知识技能盘点

赞(0) 打赏
未经允许不得转载:licqi IT技术 » Web表单美化CSS框架Topcoat
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏