样式修改
说明:默认样式如下,您可以根据需要在使用的页面直接进行修改
css
.checkout-sdk-wrapper {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
.checkout-sdk-content {
border: none;
height: 100%;
width: 100%;
overflow: hidden;
}
.checkout-sdk-input-wrap {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}
.checkout-sdk-input-content {
width: 100%;
}
.checkout-sdk-input-inline {
width: 48%;
}
.checkout-sdk-input-label {
font-size: 14px;
line-height: 20px;
font-weight: 400;
padding-bottom: 8px;
color: #264373;
}
.checkout-sdk-input {
position: relative;
box-sizing: border-box;
margin: 0;
font-variant: tabular-nums;
list-style: none;
font-feature-settings: "tnum";
position: relative;
display: inline-block;
width: 100%;
height: 39px;
padding: 8px 11px;
font-size: 14px;
line-height: 1.5;
background: #f1f5f7;
border-radius: 4px;
transition: all 0.3s;
z-index: 10;
}
.checkout-sdk-input-text {
outline: 0;
border: 0;
background: transparent;
color: #264373;
width: 100%;
height: 100%;
}
.checkout-sdk-input:hover {
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.3);
}
.checkout-sdk-input.checkout-sdk-input-focus {
box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.2);
}
.checkout-sdk-input.checkout-sdk-input-error {
box-shadow: 0 0 0 3px rgba(245, 34, 45, 0.2);
}
.checkout-sdk-input-error-tips {
color: #ff4d4f;
min-height: 22px;
margin-top: 1px;
font-size: 14px;
line-height: 1.5;
}
.checkout-sdk-input-error-tips-content {
transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
opacity: 0;
animation: fade-in 0.2s forwards;
position: relative;
}
.checkout-sdk-input-error-tips-content-hide {
transition: color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
opacity: 0;
animation: fade-out 0.1s ease-in-out;
}