如何在 sweetalert 2 中更改复选框的位置

Question

我正在寻找一种方法，看看是否可以将 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 :)')
          }
          
          })()

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

我想将复选框从中间更改到“是”一词的位置。

Answer 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;
}

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

如何在 sweetalert 2 中更改复选框的位置

how to change the position of Checkbox in sweetalert 2

checkbox

sweetalert2