0

我用 sweetalert2 创建了一个表单，但占位符几乎不可见。我看过这篇关于 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（因为它是一个占位符）。

4

1 回答 1

4

您可以使用该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/

于 2017-02-16T11:09:57.333 回答