自定义样式Checkbox在Safari及移动端Chrome中位置异常问题

问题描述 #

我采用自定义Checkbox样式方案实现表单复选框后，遇到跨浏览器布局不一致的问题：

• Safari全平台（桌面端+移动端）、移动端Chrome中，自定义Checkbox显示在文本右侧
• 仅桌面端Chrome中，Checkbox正常显示在文本左侧

相关页面的代码如下：

CSS代码 #

.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);
}

HTML代码 #

<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>

已尝试的操作 #

• 将Checkbox对应的<span>元素嵌套在<label>标签内，问题未解决
• 查阅过相关问题，但场景不完全匹配，未找到有效解决办法

显示效果对比 #

• 异常显示（Safari/移动端Chrome）：
• 正常显示（桌面端Chrome）：

内容的提问来源于stack exchange，提问作者Melanie P.