Web表单美化CSS框架Topcoat

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

创新互联技术团队十载来致力于为客户提供网站建设、成都做网站、品牌网站制作、网络营销推广、搜索引擎SEO优化等服务。经过多年发展，公司拥有经验丰富的技术团队，先后服务、推广了数千家网站，包括各类中小企业、企事单位、高校等机构单位。

Topcoat的特点

  • 小巧、简单、易用

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

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

Topcoat相关组件实例

按钮

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

HTML

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

单选框/复选框

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

 
 
    
  
  
  1. HTML
    2. 
  
  
  2. 
  
  
    4. 
  
  
    5. 
  
  
  5.   
    6. 
  
  
  6.   


  •   Left label
  •   
  •   


  •   
  •   
  •   Right label


  •   
  •   
  •   Disabled
  • CSS：
  • input[type="radio"] {
  •   height: 1.063rem;
  •   width: 1.063rem;
  •   margin-top: 0;
  •   margin-right: -1.063rem;
  •   margin-bottom: -1.063rem;
  •   margin-left: 0;
  • }
  • input[type="radio"]:checked + .topcoat-radio-button__checkmark:after {
  •   opacity: 1;
  • }
  • .topcoat-radio-button {
  •   color: #c6c8c8;
  •   line-height: 1.063rem;
  • }
  • .topcoat-radio-button__checkmark:before {
  •   width: 1.063rem;
  •   height: 1.063rem;
  •   background: #595b5b;
  •   border: 1px solid #333434;
  •   box-shadow: inset 0 1px #737373;
  • }
  • .topcoat-radio-button__checkmark {
  •   position: relative;
  •   width: 1.063rem;
  •   height: 1.063rem;
  • }
  • .topcoat-radio-button__checkmark:after {
  •   opacity: 0;
  •   width: 0.313rem;
  •   height: 0.313rem;
  •   background: #c6c8c8;
  •   border: 1px solid rgba(0,0,0,0.05);
  •   box-shadow: 0 1px rgba(255,255,255,0.1);
  •   -webkit-transform: none;
  •   -ms-transform: none;
  •   transform: none;
  •   top: 0.313rem;
  •   left: 0.313rem;
  • }
  • input[type="radio"]:focus + .topcoat-radio-button__checkmark:before {
  •   border: 1px solid #0036ff;
  •   box-shadow: inset 0 1px rgba(255,255,255,0.36), 0 0 0 2px #6fb5f1;
  • }
  • input[type="radio"]:active + .topcoat-radio-button__checkmark:before {
  •   border: 1px solid #333434;
  •   background-color: #3f4041;
  •   box-shadow: inset 0 1px rgba(0,0,0,0.05);
  • }
  • input[type="radio"]:disabled:active + .topcoat-radio-button__checkmark:before {
  •   border: 1px solid #333434;
  •   background: #595b5b;
  •   box-shadow: inset 0 1px #737373;
  • }
  • .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,
  • .topcoat-range::-moz-range-thumb {
  •   cursor: pointer;
  • }
  • .range__thumb--webkit,
  • .topcoat-range::-webkit-slider-thumb {
  •   cursor: pointer;
  •   -webkit-appearance: none;
  • }
  • .range:disabled,
  • .topcoat-range:disabled {
  •   opacity: 0.3;
  •   cursor: default;
  •   pointer-events: none;
  • }

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

    本文名称：Web表单美化CSS框架Topcoat
    网页URL：http://www.shufengxianlan.com/qtweb/news49/61149.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    定制网站知识

    各行业网站

    成都网站建设　　 　企业网站设计　　 　网站制作　　 　做网站　　 　营销网站建设　　 　重庆移动网站建设　　 　网站SEO优化排名　　 　成都seo优化　　 　合江网站建设　　 　服务器租用　　 　网站建设　　 　添翼二手车鉴定　　 　鑫友邦火锅桌　　 　成都免费自助建站　　 　蓬溪网站建设　　 　成都小程序开发　　 　乐山服务器托管　　 　定制网站建设　　 　java虚拟主机　　 　成都高电机柜租用