/* 表单样式 标题 */ .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury_title_box { padding: 20px; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury_title_box .inqury_title_text { font-family: var(--title-font-family); color: var(--title-text-color, #000); } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury_title_box .inqury_titl_desc { color: #666; font-size: 14px; font-weight: 400; line-height: 24px; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form { display: flex; flex-wrap: wrap; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .input-wrap { position: relative; padding: 12px 10px 12px 10px; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .input-wrap .input-wrap-box { position: relative; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .input-wrap.half { width: 50%; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .input-wrap.full { width: 100%; } /* 表单标签样式 */ .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .input-wrap .input-label { width: 100%; color: #666; padding-bottom: 5px; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .input-wrap .input-label.required::before { content: "*"; color: #F0150F; padding-right: 5px; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .input-wrap .input-placeholder { width: 100%; color: #8C8C8C; } /* 单行文本 */ .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .one-line-input { width: 100%; height: 36px; padding: 0 58px 0 10px; border: 1px solid #D9D9D9; border-radius: 5px; text-overflow: ellipsis; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .text-wrap .char-count, .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .phone-wrap .char-count { font-size: 12px; color: #8c8c8c; position: absolute; right: 18px; top: 11px; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .one-line-input::placeholder { color: #BFBFBF; text-overflow: ellipsis; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .one-line-input:focus { border-color: var(--color-primary); } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .one-line-input.error { border: 1px solid #F0150F; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .text-wrap .crmForm-error { margin-top: 3px; } /* 多行文本 */ .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .textarea-input { width: 100%; padding: 8px 12px; height: 96px; border: 1px solid #D9D9D9; border-radius: 5px; overflow: hidden; text-overflow: ellipsis; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .textarea-input::placeholder { color: #BFBFBF; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .textarea-input.error { border: 1px solid #F0150F; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .textarea-wrap .char-count { position: absolute; right: 20px; bottom: 22px; font-size: 12px; color: #8c8c8c; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .textarea-wrap textarea:focus { border-color: var(--color-primary); } /* 单选和checkox */ .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form input[type="radio"], .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form input[type="checkbox"] { display: none; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form input[type="radio"]+label, .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form input[type="checkbox"]+label { position: relative; padding-left: 24px; cursor: pointer; color: #333; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form input[type="radio"]+label:before, .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form input[type="checkbox"]+label:before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border: 1px solid #D9D9D9; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form input[type="radio"]+label:before { border-radius: 50%; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form input[type="checkbox"]+label:before { border-radius: 3px; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form input[type="radio"]:checked+label:before { border: 5px solid var(--color-primary); } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form input[type="checkbox"]:checked+label:before { background-color: var(--color-primary); border-color: var(--color-primary); } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form input[type="checkbox"]:checked+label:after { content: "\2713"; position: absolute; top:2px; left: 3px; font-size: 14px; color: #ffffff; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .radio-wrap.horizontal, .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .checkbox-wrap.horizontal { display: flex; flex-wrap: wrap; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .radio-wrap>div, .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .checkbox-wrap>div { margin-right: 24px; padding: 6px 0; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .radio-wrap .crmForm-error, .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .checkbox-wrap .crmForm-error { bottom: -4px; } /* 原生单选 */ .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .singel-select select { width: 100%; height: 36px; padding: 0 5px; color: #333; border: 1px solid #D9D9D9; border-radius: 5px; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .singel-select select.error { border: 1px solid #F0150F; } /* 下拉多选 */ .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .dropdown-item:active { background-color: #f5f5f5 !important; color: #333; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .dropdown-item.selected { background-color: #f5f5f5 } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .mul-select-wrap>.bootstrap-select,.crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .singel-select>.bootstrap-select { width: 100% !important; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .mul-select-wrap .bootstrap-select .btn-light,.crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .singel-select .bootstrap-select .btn-light { height: 36px; background-color: #fff; border: 1px solid #D9D9D9; } /* 附件 */ .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .attachment .input-placeholder { margin-bottom: 4px; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .attachment .upload-container { padding: 16px 8px; border: 1px dashed #D9D9D9; border-radius: 2px; cursor: pointer; color: #8C8C8C; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .attachment input.error~.upload-container { border: 1px dashed #F0150F; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .attachment-file { display: flex; flex-wrap: wrap; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .attachment-file-item { display: flex; align-items: center; width: calc(50% - 12px); height: 36px; padding: 4px 8px; margin-top: 22px; border: 1px solid #D9D9D9; border-radius: 4px; background: #FAFAFA; position: relative; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .attachment-file-item:nth-child(2n) { margin-left: 12px } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .attachment-file-item img { width: 24px; margin-right: 5px; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .attachment-file-name { display: flex; flex: 1; color: #333333 ; overflow: hidden; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .attachment-file-name .attachment-file-name-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .attachment-file-item .file-icon { font-size: 24px; margin-right: 5px; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .attachment-file-item .del-icon { width: 14px; margin-left: 8px; cursor: pointer; color: #666666; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .attachment .crmForm-error { bottom: -2px; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .attachment-file-item .file-error { color: #a94442; font-size: 12px; line-height: 1; z-index: 99; position: absolute; top: 40px } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .attachment .attachment-file-item.error { border: 1px solid #F0150F; } /* phone */ .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .phone-wrap input::placeholder { color: #BFBFBF; text-overflow: ellipsis; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .phone-wrap .bootstrap-select { width: 100px !important; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .phone-wrap .bootstrap-select .dropdown-menu, .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .bootstrap-select .dropdown-menu { width: 100%; } .dropdown-item.active, .dropdown-item:active { color: #333; background-color: #F5F5F5 !important; } /* 隐藏箭头 */ .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .phone-wrap input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .phone-wrap input[type="number"]::-webkit-inner-spin-button, .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .phone-wrap input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .bootstrap-select .dropdown-menu li.active small { color: #333; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .phone-wrap .phone-wrap-input-content { position: relative; width: 100%; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .phone-wrap .phone_number { width: 100%; flex: 1 1; height: 36px; padding: 0 48px 0 12px; border: 1px solid #D9D9D9; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-left: none; overflow: hidden; text-overflow: ellipsis; } html[dir="rtl"] .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .phone-wrap .phone_number { border-left: 1px solid #D9D9D9; border-right: none; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .phone-wrap .bootstrap-select>.dropdown-toggle { background-color: #fff; border: 1px solid #D9D9D9; border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; height: 36px; } html[dir="rtl"] .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .phone-wrap .bootstrap-select>.dropdown-toggle { border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .phone-wrap .bootstrap-select>.dropdown-toggle.bs-placeholder { height: 36px; background-color: #fff; border: 1px solid #D9D9D9; border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .mul-select-wrap .error~.dropdown-toggle.bs-placeholder, .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .singel-select .error~.dropdown-toggle.bs-placeholder{ border: 1px solid #F0150F; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .mul-select-wrap .crmForm-error,.crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .singel-select .crmForm-error { top: 40px; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .phone-wrap .crmForm-error { top: 38px } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .phone-wrap .phone_number.error { border: 1px solid #F0150F; border-left: none; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .phone-wrap .bootstrap-select .selectpicker.error~button { border: 1px solid #F0150F; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .phone-wrap .bootstrap-select .crmForm-error { display: none; } .bootstrap-select .dropdown-menu li small.text-muted { color: #333333 !important; } .bootstrap-select .dropdown-menu li.active small.text-muted { color: #333333 !important; } /* 提交 */ .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury_submit { color: #fff; background-color: var(--color-primary); padding: 10px 40px; border-radius: var(--button-radius); cursor: pointer; } /* error */ .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .crmForm-error { color: #a94442; font-size: 12px; line-height: 1; position: absolute; z-index: 99; } #crmMailMask { font-size: 14px; line-height: 1.5; color: #444; text-align: center; position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 10999; background: rgba(80, 80, 80, 0.5) } #crmMailMask, #crmMailMask * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box } #crmMailMask:after, #crmMailMask>div { display: inline-block; vertical-align: middle } #crmMailMask:after { content: ''; height: 100%; width: 0; overflow: hidden } #crmMailMask .crmMailMask-box { background: #fff; width: 300px; border-radius: 4px; max-width: 98%; padding: 25px 20px; } #crmMailMask .crmMailMask-box .crmMailMask-boxBot { margin-top: 10px } #crmMailMask .crmMailMask-box .crmMailMask-boxBot button { line-height: 1; border: 0 none; padding: 10px 15px; background: #135287; color: #fff; font-size: 13px; text-transform: capitalize } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 button.submit .crm-submit-load { display: inline-block; width: 24px; height: 20px; background: url("https://okki-shop.oss-cn-hangzhou.aliyuncs.com/tpl-common/common/images/small-load.gif") no-repeat center right; vertical-align: middle } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 button.create-form-submit[disabled] { cursor: not-allowed !important; } .crm-body-clear { overflow: hidden !important } @media (max-width: 767px) { .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .input-wrap.half { width: 100% } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .inqury-form .attachment-file .attachment-file-item { width: 100%; } .crm_inquiry_form_boxcustom_inquiry_form_1778573438106317 .attachment-file-item:nth-child(2n) { margin-left: 0px; } }