Safari（桌面/移动）和 Chrome（仅限移动）中的自定义样式复选框位于错误位置

Question

我在使用 w3schools 方法此处设置样式的复选框时遇到问题。在 Safari（移动/桌面）中，复选框位于右侧。在 Chrome（仅限移动设备）中，它也在右侧。它在桌面（左侧）的 Chrome 中正常工作。下面的代码片段看起来也很奇怪——页面是here。复选框范围位于标签内部，所以我不确定为什么它不起作用。你明白发生了什么吗？

.mc4wp-form {
  width: 100% !important;
}

.newsletter-form label {
  display: none;
}


/*.newsletter-form div {
    width: 100%;
} */

.mc4wp-form input[name="FNAME"],
.mc4wp-form input[name="LNAME"] {
  height: 65px;
  max-width: 50%;
  width: 50%;
  float: left;
  background-color: #EFE9E4;
  border-radius: 0;
  border-color: #123526;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-left: 1px solid;
}

.mc4wp-form input[name="FNAME"]::placeholder,
.mc4wp-form input[name="LNAME"]::placeholder,
.mc4wp-form input[type="email"]::placeholder {
  color: #123526;
  opacity: 1;
  /* Firefox */
}

.mc4wp-form input[name="FNAME"]::-ms-input-placeholder,
.mc4wp-form input[name="LNAME"]::-ms-input-placeholder,
.mc4wp-form input[type="email"]::-ms-input-placeholder {
  color: #123526;
  opacity: 1;
  /* Firefox */
}

.mc4wp-form input[name="FNAME"] {
  border-right: 0px;
}

.mc4wp-form input[name="LNAME"] {
  border-right: 1px solid;
}

@media only screen and (min-width: 768px) {
  .mc4wp-form input[type="email"] {
    height: 65px;
    float: left;
    max-width: 75%;
    width: 75%;
    background-color: #EFE9E4;
    border-radius: 0;
    margin-bottom: 1.5%;
    border-color: #123526 !important;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    border-top: 0px solid;
    font-family: 'Space Grotesk', Grotesk;
  }
  .mc4wp-form input[type="submit"] {
    height: 65px;
    float: left;
    max-width: 25% !important;
    width: 25% !important;
    background-color: #123526;
    color: #EFE9E4;
    margin-bottom: 1.5%;
    border: 0px;
    transition: 0.3s;
    font-family: 'Space Grotesk', Grotesk;
  }
}

@media only screen and (max-width: 767px) {
  .mc4wp-form input[type="email"] {
    height: 65px;
    float: left;
    max-width: 100%;
    width: 100%;
    background-color: #EFE9E4;
    border-radius: 0;
    margin-bottom: 0;
    border-color: #123526 !important;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    border-top: 0px solid;
    font-family: 'Space Grotesk', Grotesk;
  }
  .mc4wp-form input[type="submit"] {
    height: 65px;
    float: left;
    max-width: 100% !important;
    width: 100% !important;
    background-color: #123526;
    color: #EFE9E4;
    margin-bottom: 1.5%;
    border: 0px;
    transition: 0.3s;
    font-family: 'Space Grotesk', Grotesk;
  }
}

input[type=text],
input[type=url] {
  color: #123526;
  font-family: 'Space Grotesk', Grotesk;
}

.mc4wp-form input[type="submit"]:hover {
  background-color: #878721;
}

input:focus {
  outline: 0;
  border: 0;
  color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border-color: #123526;
  -webkit-text-fill-color: #123526;
  -moz-box-shadow: 0 0 0 1000px #EFE9E4 inset;
  -webkit-box-shadow: 0 0 0 1000px #EFE9E4 inset;
  box-shadow: 0 0 0 1000px #EFE9E4 inset;
  transition: background-color 5000s ease-in-out 0s;
}

.mc4wp-form-basic label {
  display: inline
}

@media only screen and (min-width: 768px) {
  .form-terms {
    display: block;
    position: relative;
    padding-left: 5px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-left: 0px;
  }
}

@media only screen and (max-width: 767px) {
  .form-terms {
    width: 100%;
    min-width: 100%;
    display: block;
    position: relative;
    padding-left: 5px;
    margin-bottom: 2px;
    cursor: pointer;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-left: 0px;
  }
}

.form-terms a {
  font-weight: normal;
}

.form-terms a:hover {
  font-weight: normal;
}


/* Hide the browser's default checkbox */

.form-terms input {
  position: relative;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}


/* Create a custom checkbox */

.checkmark {
  position: absolute;
  left: 0 !important;
  height: 20px;
  width: 20px;
  border: 1px solid #123526;
  background-color: #EFE9E4;
}


/* On mouse-over, add a grey background color */

.form-terms:hover input~.checkmark {
  background-color: #EFE9E4;
}


/* When the checkbox is checked, add a blue background */

.form-terms input:checked~.checkmark {
  background-color: #123526;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}


/* Show the checkmark when checked */

.form-terms input:checked~.checkmark:after {
  display: block;
}


/* Style the checkmark/indicator */

.form-terms .checkmark:after {
  left: 6px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #EFE9E4;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

<div class="mc4wp-form"><input type="text" name="FNAME" placeholder="First name" class="form-first" aria-label="First name" required="">
  <input type="text" name="LNAME" placeholder="Last name" class="form-last" aria-label="Last name" required="">
  <input type="email" name="EMAIL" placeholder="Email address" class="form-email" aria-label="Email" required />
  <input type="submit" value="Sign up" class="form-submit" aria-label="Sign up" />
  <center><label class="form-terms">  
      <input type="checkbox" name="AGREE_TO_TERMS" value="1" aria-label="I have read and agree to the terms &amp; conditions" required=""> <a href="https://melaniepatterson.com/terms-conditions" class="wave" target="_blank">I have read and agree to the terms &amp; conditions</a>
   <span class="checkmark"></span> 
  </label></center>
</div>

我也看过this，但这不是完全相同的问题。

Answer 1

解决方案需要一些 HTML 结构问题和一些 CSS 更改。无需对

absolute

范围设置

checkmark

样式，因为将

display: flex

添加到父标签就足够了。

样式需要更新如下。

CSS：

.mc4wp-form-basic input[type=checkbox], .mc4wp-form-basic input[type=radio]{
   display: none;
}
.checkmark {
    /*position: absolute;*/
    position: relative;
    left: auto !important;
    height: 20px;
    width: 20px;
    border: 1px solid #123526;
    background-color: #EFE9E4;
    
    
    /*New added css*/
    margin: 0 10px 0 0px;
    display: inline-block;
    vertical-align: middle;
}
.mc4wp-form-basic label {
    /*display: inline;*/
    display: flex;
    justify-content: center;
    align-items: center;
}

HTML：

checkmark

span 标签需要放置在

a

标签之前。

检查上述解决方案。希望有帮助！