如何更改 Sweetalert 2 中复选框的位置答案

【问题标题】：how to change the position of Checkbox in sweetalert 2如何更改 Sweetalert 2 中复选框的位置
【发布时间】：2022-01-21 18:15:56
【问题描述】：

我正在寻找一种方法来查找是否可以将 sweetalert 2 中复选框的位置从中心更改为上部位置？我使用了这段代码：

(async () => {

          const { value: accept } = await Swal.fire({
            title: 'Terms and conditions',
            input: 'checkbox',
            inputValue: 1,
            inputPlaceholder:
              'Yes, I agree to receive an email, including educational materials, product and company announcements, and community even information, from T&C. I can unsubscribe at any time. I would like to opt into receiving marketing communications as outlined above.',
            confirmButtonText:
              'Continue <i class="fa fa-arrow-right"></i>',
            inputValidator: (result) => {
              return !result && 'You need to agree with T&C'
            }
          })
          
          if (accept) {
            Swal.fire('You agreed with T&C :)')
          }
          
          })()

这段代码的结果是这样的：

我想将复选框从中心更改为“是”字的位置。

【问题讨论】：

标签： checkbox sweetalert2

【解决方案1】：

使用customClass 参数来实现输入的自定义放置：

Swal.fire({
  input: 'checkbox',
  inputPlaceholder: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
  customClass: {
    input: 'top-checkbox'
  }
})

.top-checkbox input {
  align-self: flex-start;
  margin: 3px 10px 0 0 !important;
}

&lt;script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"&gt;&lt;/script&gt;

【讨论】：