效果图

image.png

关于switch开关，主要在于将checkbox的-webkit-appearance属性设置为none，其他都是样式的调整

1.html

2.css

.address_content{

padding-left: 10px;

}

.address_content ul{

margin: 0;

padding: 0;

list-style: none;

}

.address_content ul li{

height: 60px;

line-height: 60px;

border-bottom: 1px solid #E4E4E4;

}

.address_content_1{

padding-left: 10px;

}

.address_content_1 ul{

margin: 0;

padding: 0;

list-style: none;

}

.address_content_1 ul li{

height: 60px;

line-height: 60px;

border-bottom: 1px solid #E4E4E4;

}

.address_content label{

font-size: 14px;

width: 110px;

display: inline-block;

}

.address_content_1 label{

font-size: 14px;

width: 110px;

display: inline-block;

}

.block{

width: 100%;

height: 10px;

background-color: #F5F5F5;

}

.comfirmBtn{

width: calc(100% - 40px);

height: 50px;

line-height: 50px;

border-radius: 4px;

text-align: center;

background-color: royalblue;

margin-top: 20px;

margin-left: 20px;

color: white;

font-size: 18px;

}

.address_content input{

line-height: 30px;

height: 30px;

border: none;

box-sizing: border-box;

width: calc(100% - 110px);

font-size: 13px;

border-radius: 3px;

}

.address_content input:focus {

outline: none;

border: none;

}

.address_content_1 textarea{

line-height: 25px;

height: 60px;

border: none;

box-sizing: border-box;

width: calc(100% - 110px);

font-size: 14px;

border-radius: 3px;

float: right;

padding: 5px 0px;

margin-top: 10px;

}

.address_content_1 textarea:focus {

outline: none;

border: none;

}

.right_iccon{

width: 20px;

height: 20px;

vertical-align:middle;

float:right;

margin-top: 20px;

margin-right: 15px;

}

.select{

float:right;

margin-right: 5px;

color: #a9a9a9;

font-size: 14px;

}

.address_detail{

height: 80px;

}

.switch{

width: 60px;

height: 30px;

border-radius: 20px;

-webkit-appearance: none;

user-select: none;

outline: none;

background-color: #e0e0e0;

box-shadow: #c2c2c2 0 0 0 0 inset;

position: relative;

transition:0.4s;

}

.switch:before{

content: '';

width: 28px;

height: 28px;

border-radius: 100%;

background-color: #fff;

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

position: absolute;

left:0;

top:1px;

transition:0.3s;

}

.switch:checked{

border-color: royalblue;

background-color: royalblue;

}

.switch:checked:before{

left:32px;

}

.location{

margin: 15px 15px 15px 0px;

}