Browse Source

修复结算页深色模式下输入框文字颜色

- 将深色模式下的输入框文字颜色从白色改为黑色
- 确保在深色模式下输入内容时可见性更好
- 优化用户体验,特别是在夜间使用场景下
pull/3/head
徐飞洋 2 months ago
parent
commit
4aa3cde24b
  1. 87
      pages/settlement/index.wxss

87
pages/settlement/index.wxss

@ -172,30 +172,7 @@ input, textarea {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
/* 防止iOS输入框背景变黄 */
-webkit-autofill: none;
background-color: #fff;
}
/* 深色模式下的输入框样式 */
@media (prefers-color-scheme: dark) {
input, textarea {
background-color: #2c2c2e !important;
color: #fff !important;
}
input::placeholder, textarea::placeholder {
color: #8e8e93 !important;
}
/* 确保.form-input类在深色模式下也生效 */
.form-input {
background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%) !important;
color: #fff !important;
border-color: #48484a !important;
}
.form-input::placeholder {
color: #8e8e93 !important;
}
background-color: #fff !important;
}
/* 按钮全局优化 */
@ -323,7 +300,7 @@ picker {
@media (prefers-color-scheme: dark) {
.form-input {
background-color: #2c2c2e;
color: #fff;
color: #000000;
border-color: #48484a;
}
@ -334,7 +311,7 @@ picker {
.cooperation-option {
background-color: #2c2c2e;
border-color: #48484a;
color: #fff;
color: #000000;
}
.cooperation-option.active {
@ -628,36 +605,6 @@ picker {
opacity: 0.7;
}
/* 深色模式下的表单输入框样式 */
@media (prefers-color-scheme: dark) {
.form-input {
background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%);
border-color: #48484a;
color: #fff;
}
.form-input::placeholder {
color: #8e8e93;
}
.form-input:focus {
background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%);
border-color: #07C160;
box-shadow: 0 4rpx 16rpx rgba(7, 193, 96, 0.3);
}
.form-input.error {
background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%);
border-color: #FA5151;
box-shadow: 0 4rpx 16rpx rgba(250, 81, 81, 0.3);
}
.form-input:focus::placeholder {
color: #636366;
opacity: 0.7;
}
}
/* placeholder样式优化 */
.form-input::placeholder {
color: #999;
@ -803,34 +750,6 @@ picker {
font-weight: 500;
}
/* 深色模式下的地址选择器样式 */
@media (prefers-color-scheme: dark) {
.region-picker {
background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%);
border-color: #48484a;
color: #fff;
}
.region-picker .picker-content text {
color: #fff;
}
.region-picker:focus {
background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%);
border-color: #07C160;
box-shadow: 0 4rpx 16rpx rgba(7, 193, 96, 0.3);
}
.region-picker.placeholder {
color: #8e8e93;
}
.region-picker:not(.placeholder) {
border-color: #07C160;
color: #fff;
}
}
/* 微信风格的合作模式选择 - 针对真机优化 */
.cooperation-options {
display: grid;

Loading…
Cancel
Save