.form .form-item { display: flex; justify-content: space-between; margin-bottom: 25px; } .form .form-item .form-label { font-size: 16px; color: #999; line-height: 40px; min-width: 100px; text-align: right; margin-right: 16px; } .form .form-item .form-label em { color: #ff0000; margin-right: 4px; } .form .form-item .form-control { flex: 1; color: #505050; font-size: 16px; } .form .form-item .form-control.input input { display: block; width: 100%; line-height: 40px; border: 1px solid #dedede; box-sizing: border-box; padding: 0 16px; border-radius: 4px; } .form .form-item .form-control.textarea textarea { display: block; width: 100%; line-height: 26px; border: 1px solid #dedede; box-sizing: border-box; padding: 8px 16px; border-radius: 2px; resize: none; } .form .form-item .form-control.select-group { display: flex; justify-content: space-between; } .form .form-item .form-control.select-group .select { width: 100%; flex: 1; position: relative; margin-right: 16px; border: 1px solid #e8e8e8; border-radius: 2px; } .form .form-item .form-control.select-group .select:last-child { margin-right: 0; } .form .form-item .form-control.select-group .select select { display: block; width: 100%; border: 0; line-height: 40px; padding: 0 16px; padding-right: 40px; color: #272727; appearance: none; border-radius: 2px; } .form .form-item .form-control.select-group .select::after { position: absolute; right: 0; top: 0; content: ""; z-index: 1; display: block; width: 40px; height: 40px; background: url(/img/icon-arrow-down.png) no-repeat center; background-size: 24px 24px; pointer-events: none; } .form .form-item .form-control.radio { line-height: 40px; } .form .form-item .form-control.radio label { margin-right: 35px; } .form .form-item .form-control.radio input { margin-right: 10px; } .form .form-item .form-control.upload-image input { display: none; } .form .form-item .form-control.upload-image .tip { width: 120px; height: 120px; border: 1px solid #dedede; margin-top: 10px; box-sizing: border-box; padding-top: 80px; text-align: center; font-size: 14px; color: #999; cursor: pointer; position: relative; } .form .form-item .form-control.upload-image .tip::before, .form .form-item .form-control.upload-image .tip::after { content: ""; display: block; position: absolute; background: #dedede; width: 2px; height: 30px; left: 50%; top: 50%; } .form .form-item .form-control.upload-image .tip::before { transform: translateX(-50%) translateY(-80%); } .form .form-item .form-control.upload-image .tip::after { transform: translateX(-50%) translateY(-80%) rotateZ(90deg); } .form .form-item .form-control.upload-file [type=file] { display: none; } .form .form-item .form-control.upload-file .button { line-height: 40px; width: 207px; background: #0688d2; color: #fff; text-align: center; margin-left: 16px; cursor: pointer; transition: all 0.4s; } .form .form-item .form-control.upload-file .button:hover { background: #077ec4; } .form .form-submit { text-align: center; margin-top: 80px; } .form .form-submit button { width: 330px; height: 48px; background: transparent; box-sizing: border-box; border: 0; cursor: pointer; margin: 0 24px; transition: all 0.4s; } .form .form-submit [type=reset] { border: 1px solid #0688d2; color: #0688d2; line-height: 46px; } .form .form-submit [type=reset]:hover { border-color: #0679b8; color: #0679b8; } .form .form-submit [type=submit] { background: #0688d2; color: #fff; line-height: 48px; } .form .form-submit [type=submit]:hover { background: #077ec4; }