Sweetalert 2 占位符不透明度

Question

我使用 sweetalert2 创建了一个表单，但占位符几乎不可见。我看过 this 关于 sweetalert 占位符样式的帖子。但这是给甜心的。我已经查看了我的代码，如果 2 可能同样适用。

我在 sweetalert2.css

中找到了这段代码

.swal2-modal .swal2-input:focus::-webkit-input-placeholder,
.swal2-modal .swal2-file:focus::-webkit-input-placeholder,
.swal2-modal .swal2-textarea:focus::-webkit-input-placeholder {
  -webkit-transition: opacity .3s .03s ease;
  transition: opacity .3s .03s ease;
  opacity: .8;
}

.swal2-modal .swal2-input:focus::-moz-placeholder,
.swal2-modal .swal2-file:focus::-moz-placeholder,
.swal2-modal .swal2-textarea:focus::-moz-placeholder {
  -webkit-transition: opacity .3s .03s ease;
  transition: opacity .3s .03s ease;
  opacity: .8;
}

.swal2-modal .swal2-input:focus:-ms-input-placeholder,
.swal2-modal .swal2-file:focus:-ms-input-placeholder,
.swal2-modal .swal2-textarea:focus:-ms-input-placeholder {
  -webkit-transition: opacity .3s .03s ease;
  transition: opacity .3s .03s ease;
  opacity: .8;
}

.swal2-modal .swal2-input:focus::placeholder,
.swal2-modal .swal2-file:focus::placeholder,
.swal2-modal .swal2-textarea:focus::placeholder {
  -webkit-transition: opacity .3s .03s ease;
  transition: opacity .3s .03s ease;
  opacity: .8;
}

但是当我改变不透明度并刷新我的页面时，并没有什么不同。而且我似乎无法弄清楚在浏览器中的哪个位置（检查元素）我可以找到特定的 CSS（因为它是一个占位符）。

Answer 1

inputClass 选项可用于修改默认输入样式：

swal({
  title: 'Input with custom styling',
  input: 'text',
  inputPlaceholder: 'Placeholder text',
  inputClass: 'custom-input-class'
 })

.custom-input-class::-webkit-input-placeholder {
  color: #f00 !important;
  opacity: 1 !important;
}

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7"></script>

在此处阅读有关可用选项的更多信息：https://limonte.github.io/sweetalert2/