我在使用 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 & conditions" required=""> <a href="https://melaniepatterson.com/terms-conditions" class="wave" target="_blank">I have read and agree to the terms & conditions</a>
<span class="checkmark"></span>
</label></center>
</div>
我也看过this,但这不是完全相同的问题。
解决方案需要一些 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
标签之前。
检查上述解决方案。希望有帮助!