TYPO3表单 - 复选框的Bootstrap样式

2 回答

• 0

  这样的事情会起作用

  为你的html添加了一个 Span - 请看下面的注释，其余的只是css - 我希望这会帮助你

  如果你不能添加任何HTML，它必须是直接的CSS然后这fiddle将工作（我能做到最好） . 扩展这个CSS应该可以解决问题

  .form-check {
      display: block;
      position: relative;
      padding-left: 35px;
      margin-bottom: 12px;
      cursor: pointer;
      font-size: 22px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
  }
  
  .form-check input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
  }
  
  .checkmark {
      position: absolute;
      top: 0;
      left: 0;
      height: 20px;
      width: 20px;
      background-color: #eee;
      border: 1px solid #e3e4e5;
  }
  
  .form-check input:checked ~ .checkmark {
      background-color: purple;
  }
  
  .checkmark:after {
      content: "";
      position: absolute;
      display: none;
  }
  
  .form-check input:checked ~ .checkmark:after {
      display: block;
  }
  
  .form-check .checkmark:after {
      left: 7px;
      top: 3px;
      width: 5px;
      height: 10px;
      border: solid white;
      border-width: 0 3px 3px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg
  }
  

  <div class="form-group">
      <div class="input checkbox">
          <div class="form-check">
              <label class="add-on form-check-label" for="basicContactForm-checkbox-1">
              <input name="tx_form_formframework[BasicContactForm][checkbox-1]" value="" type="hidden">
              <input required="required" class="add-on" id="basicContactForm-checkbox-1" name="tx_form_formframework[BasicContactForm][checkbox-1]" value="1" type="checkbox">
              <span class="checkmark"></span><!-- added for checkbox -->
              <span>Yes, I confirm!<span class="required">*</span></span>
              </label>
          </div>
      </div>
  </div>
  

  回复于 2024-05-03T00:00:02+08:00
• 2

  只需将CSS添加到您的头部并按照github上的文档https://github.com/flatlogic/awesome-bootstrap-checkbox

  回复于 2024-05-03T00:00:02+08:00