Question

我用sweetalert2创建了一个表单，但占位符几乎看不到。我查看了关于sweetalert占位符样式的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;
}

但是当我改变不透明度并刷新我的页面时，没有任何不同的事情发生。我似乎无法弄清楚在浏览器（Inspect元素）中我可以找到特定的CSS（因为它是一个占位符）。

Answer 1

您可以使用inputClass选项修改默认输入样式：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

在此处详细了解可用选项：https://limonte.github.io/sweetalert2/

Sweetalert 2占位符不透明

1 个答案: