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

Posted 2023-03-05

【中文标题】如何更改 Sweetalert 2 中复选框的位置

【英文标题】：how to change the position of Checkbox in 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 :)')
          
          
          )()  

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

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

【参考方案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>