.basic-input-area { display: flex; flex-wrap: wrap; justify-content: space-between; width:900px; position: relative; top:-10px; left: 40px; } .chinese-input-area { } .english-input-area { } .input-span-style { width: 120px; line-height: 35px; display:inline-block; } input { height:27px; width:220px; padding-left: 4px; cursor:auto; } header { background-color:white; color:black; text-align:center; padding:0px; font-size:10px; } textarea{ width:350px; height:80px; resize:auto; } fieldset { border: 0 none; border-top: 1px solid #ddd; } legend { text-align: center; } .showBtnClass { height:40px; width:150px; position: relative; left:5px; top:10px; background-color: #4CAF50; border: none; color: white; border-radius: 4px; display: inline-block; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; cursor: auto; font-size:20px; } .showBtnClass1 { border-radius: 4px; background-color: white; color: black; border: 1px solid #4CAF50; } .showBtnClass1:hover { border-radius: 4px; background-color: #4CAF50; color: white; cursor:pointer; } .input-setting-switch { width:900px; position: relative; top:-15px; left: 40px; } .setting-jianfan-switch { display:flex; } .setting-jianfan-span { width: 150px; line-height: 35px; display:inline-block; } .setting-checkbox{ width: 45px; height: 28px; cursor: auto; position: absolute; left:110px; } .input-info-style { position: relative; top:-10px; left: 40px; } .get-ime-info-class { display: flex; flex-wrap: wrap; justify-content: space-between; width:600px; height:50px; position: relative; top:-10px; left: 40px; } input[type=radio],input[type=checkbox] { display: inline-block; vertical-align: middle; width: 25px; height: 25px; margin-left: 5px; appearance: none; /**css3属性,不支持ie和opera**/ -webkit-appearance: none; -moz-appearance: none; background-color: transparent; border: 0; outline: 0 !important; line-height: 20px; color: #d8d8d8; } input[type=radio]::after { content: ""; display:block; width: 20px; height: 20px; border-radius: 50%; text-align: center; line-height: 14px; font-size: 16px; color: #fff; border: 2px solid #ddd; background-color: #fff; box-sizing:border-box; } input[type=checkbox]::after { content: ""; display:block; width: 25px; height: 25px; text-align: center; line-height: 14px; font-size: 16px; color: #fff; border: 2px solid #ddd; background-color: #fff; box-sizing:border-box; } input[type=checkbox]:checked::after { content: "\2713"; border-color: #37AF6E; background-color: #37AF6E; } input[type=radio]:checked::after { content: "L"; transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0); -webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0); -ms-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0); /*兼容ie9+ */ -moz-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0); /*兼容ie9+ */ border-color: #37AF6E; background-color: #37AF6E; }