<dl><dt></dt></dl>
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;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
.checkbox__label {
.checkbox--disabled {
opacity: 0.3;
pointer-events: none;
.checkbox:before,
.checkbox:after {
content: '';
.checkbox:before {
.checkbox,
.topcoat-checkbox__checkmark {
.checkbox__label,
.topcoat-checkbox {
.checkbox--disabled,
input[type="checkbox"]:disabled + .topcoat-checkbox__checkmark {
.checkbox:after,
.topcoat-checkbox__checkmark:before,
.topcoat-checkbox__checkmark:after {
.topcoat-checkbox__checkmark:before {
单选框/复选框
以单选框为例，相关代码如下：
html
<!-- no label -->
<label class="topcoat-radio-button">
<input type="radio" name="topcoat">
<div class="topcoat-radio-button__checkmark"></div>
</label>
<br>
<!-- left label -->
left label
<!-- right label -->
right label
<!-- disabled -->
<input type="radio" name="topcoat" disabled>
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 {
background: #595b5b;
border: 1px solid #333434;
box-shadow: inset 0 1px #737373;
.topcoat-radio-button__checkmark {
.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 {
background-color: #3f4041;
box-shadow: inset 0 1px rgba(0,0,0,0.05);
input[type="radio"]:disabled:active + .topcoat-radio-button__checkmark:before {
.range {
margin: 0;
font: inherit;
color: inherit;
background: transparent;
border: none;
-webkit-appearance: none;
.range__thumb {
cursor: pointer;
.range__thumb--webkit {
.range:disabled {
.range,
.topcoat-range {
.range__thumb,
.topcoat-range::-moz-range-thumb {
.range__thumb--webkit,
.topcoat-range::-webkit-slider-thumb {
.range:disabled,
.topcoat-range:disabled {
更多关于topcoat的组件，大家可以前往其官方网站进行学习。
作者：佚名
来源：51cto