cssUI组件01

switch 开关

<style>
  .switch{
  	float: left;
  	margin-right: 30px;
  }
  .switch_inp{
    display: none;
  }
  .switch_btn{
    position:relative;
    display: block;
    width:40px;
    height: 20px;
    cursor:pointer;
    border-radius: 10px;
    background: #b0b0b0; 
  }
  .switch_btn:before{
    content:attr(off);
    float: right;
    width:100%;
    line-height: 18px;
    text-align: right;
    font-size:12px;
    color:#fff;
    transform:scale(0.75);
  }
  .switch_btn:after{
    content:'';
    position:absolute;
    top:0;
    left:0px;
    width:20px;
    height:20px;
    border-radius: 50%;
    background-color: #fff;
    transition:left 200ms linear;
    background: #abcdef;
  }
  .switch_inp:checked + .switch_btn{
    background-color: #028EFD;
  }
  .switch_inp:checked + .switch_btn:before{
    content:attr(on);
    text-align: left;
  }
  .switch_inp:checked + .switch_btn:after{
    left:20px;
  }
</style>

<label class="switch">
	<input type="checkbox" class="switch_inp">
    <a class="switch_btn" on="开" off="关"></a>
</label>

<label class="switch">
	<input type="checkbox" class="switch_inp" checked>
    <a class="switch_btn" on="开" off="关"></a>
</label>

显示结果:

复选框

<style>
  .css_checkbox {
    float: left;
    width:100px;
    user-select: none;
  }
  .css_checkbox_inp{ 
    display: none; 
  }
  .css_checkbox_box{
  	display: table;
  }
  .css_checkbox_box>div{
  	display: table-cell;
    vertical-align: middle;
  }
  .css_checkbox_icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right:5px;
  }
  .css_checkbox_icon::before {
    display: inline-block;
    width:18px;
    height:18px;
    text-align: center;
    line-height: 18px;
    content: "";
    font-size: 18px;
    color: #028EFD;
    border: 1px solid #cccccc;
    border-radius: 3px;
    overflow: hidden;
    vertical-align: top;
    margin-top: 2px;
  }
  .css_checkbox_inp:checked + .css_checkbox_box .css_checkbox_icon:before {
    content: "√";
    border: 1px solid #028EFD;
  }
  .css_checkbox_inp:checked + .css_checkbox_box .css_icon_bg:before {
    content: "√";
    background: #028EFD;
    color: #fff;
    border: 1px solid #028EFD;
  }
</style>

<label class="css_checkbox">
	<input type="checkbox" class="css_checkbox_inp">
	<div class="css_checkbox_box">
	    <div><span  class="css_checkbox_icon"></span></div>
	    <div class="css_checkbox_context">同意</div> 		
	</div>
</label>

<label class="css_checkbox">
	<input type="checkbox" class="css_checkbox_inp" checked>
	<div class="css_checkbox_box">
	    <div><span  class="css_checkbox_icon"></span></div>
	    <div class="css_checkbox_context">同意</div> 		
	</div>
</label>

<label class="css_checkbox">
	<input type="checkbox" class="css_checkbox_inp" checked>
	<div class="css_checkbox_box">
	    <div><span  class="css_checkbox_icon css_icon_bg"></span></div>
	    <div class="css_checkbox_context">同意</div> 		
	</div>
</label>

<label class="css_checkbox">
	<input type="checkbox" class="css_checkbox_inp" checked>
	<div class="css_checkbox_box">
	    <div><span  class="css_checkbox_icon"></span></div>
	    <div class="css_checkbox_context">同意同意同意同意</div> 		
	</div>
</label>

显示结果: