我正在尝试让我的复选框在选中时切换到红色背景。我也有一个问题，页脚出现在表格的一半左右。在我的所有其他页面上，它将它推到底部，但在此页面上，它似乎正好围绕提交按钮区域。
到目前为止，我有这个
/* --- footer --- */
#footer {
background: #fff;
padding-top: 10px;
padding-bottom: 0px;
clear: both;
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
border-top: 1px ridge #e60000;
height: auto;
}
.footer {
margin-top: 5%;
}
/* --- form ---*/
.card-box {
border: 2px solid #f3f3f3;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
background-clip: padding-box;
margin-bottom: 20px;
background-color: #fff;
padding: 20px;
}
form {
display: block;
margin-top: 0em;
}
.m-b-20 {
margin-bottom: 20px!important;
}
.p-20 {
padding: 20px!important;
}
.form-group {
margin-bottom: 15px;
}
.checkbox {
padding-left: 20px;
}
.m-b-15 {
margin-bottom: 15px!important;
}
.checkbox,
.radio {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
.checkbox input[type="checkbox"] {
cursor: pointer;
opacity: 0;
z-index: 1;
outline: none !important;
}
.checkbox input[type=checkbox],
.checkbox-inline input[type=checkbox],
.radio input[type=radio],
.radio-inline input[type=radio] {
position: absolute;
margin-top: 4px\9;
margin-left: -20px;
}
input[type=checkbox],
input[type=radio] {
margin: 4px 0 0;
margin-top: 1px\9;
line-height: normal;
}
input[type=checkbox],
input[type=radio] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
input {
line-height: normal;
}
button,
input,
optgroup,
select,
textarea {
margin: 0;
font: inherit;
color: inherit;
}
.checkbox-primary input[type="checkbox"]:checked+label::after {
background-color: #7fc1fc;
border-color: #7fc1fc;
}
.checkbox label::before {
-o-transition: 0.3s ease-in-out;
-webkit-transition: 0.3s ease-in-out;
background-color: #ffffff;
border-radius: 2px;
border: 1px solid #dadada;
content: "";
display: inline-block;
height: 17px;
left: 0;
margin-left: -20px;
position: absolute;
transition: 0.3s ease-in-out;
width: 17px;
outline: none !important;
margin-top: 2px;
}
label {
font-weight: 600;
font-family: 'Hind Madurai', sans-serif;
}
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
}
:after,
:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.checkbox-primary input[type="checkbox"]:checked+label::after {
color: #ffffff;
}
.checkbox input[type="checkbox"]:checked+label::after {
content: "\F12C";
font-family: 'Material Design Icons';
font-weight: bold;
}
.checkbox label::after {
color: #797979;
display: inline-block;
font-size: 11px;
height: 16px;
left: 0;
margin-left: -20px;
padding-left: 3px;
padding-top: 1px;
position: absolute;
top: 2px;
width: 16px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://localhost/shoverswebsite/css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="description" content="Quality rental apartments available in Milwaukee. One bedroom, Two bedroom, Three Bedroom units in Milwaukee(North, South, and EastSide), Greenfield, Cudahy, Port Washington, Glendale, Shorewood, UWM, MSOE campus and downtown units are available to rent today, apply today! 414-962-8000"
/>
<title>Shovers Realty, LLC Administration Page</title>
</head>
<body>
<div class="main">
<div class="header">
<?php
include("../includes/header.php")
?>
</div>
<div class="container-fluid" id='content'>
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div class="page-title-box">
<h4 class="page-title">Add Property</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div class="card-box">
<form role="form">
<div class="row">
<div class="col-xs-12 col-md-">
<div class="p-20">
<div class="form-group m-b-20">
<label for="address">Address</label>
<input type="text" class="form-control" id="property-address" placeholder="Enter Address">
</div>
<div class="form-group m-b-20">
<label for="city">City</label>
<input type="text" class="form-control" id="property-location" placeholder="Enter City">
</div>
<div class="form-group m-b-20">
<label for="property-desc">Description</label>
<textarea class="form-control" id="property-desc" rows="5"></textarea>
</div>
<div class="form-group m-b-20">
<label for="rent">Price / Rent</label>
<input type="text" class="form-control" id="property-price" placeholder="Enter Rent">
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4 m-b-10">
<label for="bedrooms">Bedrooms</label>
<input type="text" class="form-control" id="bedrooms">
</div>
<div class="col-sm-4 m-b-10">
<label for="Square-ft">Square ft </label>
<input type="text" class="form-control" id="Square-ft">
</div>
<div class="col-sm-4 m-b-10">
<label for="car-parking">Car Parking</label>
<input type="text" class="form-control" id="car-parking">
</div>
</div>
</div>
</div>
<!-- end class p-20 -->
</div>
<!-- end col -->
<div class="col-xs-12 col-md-6">
<div class="p-20">
<div class="form-group m-b-20">
<label>General Amenities</label>
<div class="row">
<div class="col-xs-6">
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox1" type="checkbox" checked="">
<label for="checkbox1">
Swimming pool
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">
Terrace
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">
Air conditioning
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox4" type="checkbox" checked="">
<label for="checkbox4">
Internet
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox5" type="checkbox">
<label for="checkbox5">
Balcony
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox6" type="checkbox" checked="">
<label for="checkbox6">
Cable TV
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox7" type="checkbox" checked="">
<label for="checkbox7">
Computer
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox8" type="checkbox">
<label for="checkbox8">
Grill
</label>
</div>
</div>
<!-- end col -->
<div class="col-xs-6">
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox9" type="checkbox">
<label for="checkbox9">
Dishwasher
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox10" type="checkbox">
<label for="checkbox10">
Near Green Zone
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox11" type="checkbox" checked="">
<label for="checkbox11">
Near Church
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox12" type="checkbox">
<label for="checkbox12">
Near Hospital
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox13" type="checkbox" checked="">
<label for="checkbox13">
Near School
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox14" type="checkbox" checked="">
<label for="checkbox14">
Near Shop
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox15" type="checkbox" checked="">
<label for="checkbox15">
Oven
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox16" type="checkbox">
<label for="checkbox16">
Cofee pot
</label>
</div>
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
</div>
<!-- end class p-20 -->
</div>
<!-- end col -->
</div>
<!-- end row -->
<div class="text-center">
<button type="submit" class="btn btn-success waves-effect waves-light">Submit</button>
<button type="button" class="btn btn-danger waves-effect waves-light">Delete</button>
</div>
</form>
<!-- end form -->
</div>
<!-- end card-box -->
</div>
<!-- end col -->
</div>
</div>
<!-- end container -->
<!-- end row -->
<!-- Footer -->
<div class="footer" style="clear:both;">
<?php
include "../includes/footer.php";
?>
</div>
<!-- End Footer -->
</div>
</body>
</html>
我一直在为页脚调整很多东西，但是对它进行更改会弄乱我的其他页面并将其推到中间位置，因为这些页面空白。
我一直在为复选框尝试所有内容但是却没有找到为什么它没有采用伪元素
感谢所有帮助。
谢谢！
答案 0 :(得分：0)
试试这个代码段。选中后，标签将变为红色。
/* --- footer --- */
#footer {
background: #fff;
padding-top: 10px;
padding-bottom: 0px;
clear: both;
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
border-top: 1px ridge #e60000;
height: auto;
}
.footer {
margin-top: 5%;
}
/* --- form ---*/
.card-box {
border: 2px solid #f3f3f3;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-border-radius: 5px;
background-clip: padding-box;
margin-bottom: 20px;
background-color: #fff;
padding: 20px;
}
form {
display: block;
margin-top: 0em;
}
.m-b-20 {
margin-bottom: 20px!important;
}
.p-20 {
padding: 20px!important;
}
.form-group {
margin-bottom: 15px;
}
.checkbox {
padding-left: 20px;
}
.m-b-15 {
margin-bottom: 15px!important;
}
.checkbox,
.radio {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
.checkbox input[type="checkbox"] {
cursor: pointer;
opacity: 0;
z-index: 1;
outline: none !important;
}
.checkbox input[type=checkbox],
.checkbox-inline input[type=checkbox],
.radio input[type=radio],
.radio-inline input[type=radio] {
position: absolute;
margin-top: 4px\9;
margin-left: -20px;
}
input[type=checkbox],
input[type=radio] {
margin: 4px 0 0;
margin-top: 1px\9;
line-height: normal;
}
input[type=checkbox],
input[type=radio] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
input {
line-height: normal;
}
button,
input,
optgroup,
select,
textarea {
margin: 0;
font: inherit;
color: inherit;
}
.checkbox-primary input[type="checkbox"]:checked+label::after {
background-color: #7fc1fc;
border-color: #7fc1fc;
}
.checkbox label::before {
-o-transition: 0.3s ease-in-out;
-webkit-transition: 0.3s ease-in-out;
background-color: #ffffff;
border-radius: 2px;
border: 1px solid #dadada;
content: "";
display: inline-block;
height: 17px;
left: 0;
margin-left: -20px;
position: absolute;
transition: 0.3s ease-in-out;
width: 17px;
outline: none !important;
margin-top: 2px;
}
label {
font-weight: 600;
font-family: 'Hind Madurai', sans-serif;
}
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
}
:after,
:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.checkbox-primary input[type="checkbox"]:checked+label::after {
color: #ffffff;
}
.checkbox input[type="checkbox"]:checked+label::after {
content: "\F12C";
font-family: 'Material Design Icons';
font-weight: bold;
}
.checkbox label::after {
color: #797979;
display: inline-block;
font-size: 11px;
height: 16px;
left: 0;
margin-left: -20px;
padding-left: 3px;
padding-top: 1px;
position: absolute;
top: 2px;
width: 16px;
}
}
input[type=checkbox]+label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked+label {
color: #f00;
font-style: normal;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://localhost/shoverswebsite/css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="description" content="Quality rental apartments available in Milwaukee. One bedroom, Two bedroom, Three Bedroom units in Milwaukee(North, South, and EastSide), Greenfield, Cudahy, Port Washington, Glendale, Shorewood, UWM, MSOE campus and downtown units are available to rent today, apply today! 414-962-8000"
/>
<title>Shovers Realty, LLC Administration Page</title>
</head>
<body>
<div class="main">
<div class="header">
<?php
include("../includes/header.php")
?>
</div>
<div class="container-fluid" id='content'>
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div class="page-title-box">
<h4 class="page-title">Add Property</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div class="card-box">
<form role="form">
<div class="row">
<div class="col-xs-12 col-md-">
<div class="p-20">
<div class="form-group m-b-20">
<label for="address">Address</label>
<input type="text" class="form-control" id="property-address" placeholder="Enter Address">
</div>
<div class="form-group m-b-20">
<label for="city">City</label>
<input type="text" class="form-control" id="property-location" placeholder="Enter City">
</div>
<div class="form-group m-b-20">
<label for="property-desc">Description</label>
<textarea class="form-control" id="property-desc" rows="5"></textarea>
</div>
<div class="form-group m-b-20">
<label for="rent">Price / Rent</label>
<input type="text" class="form-control" id="property-price" placeholder="Enter Rent">
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-4 m-b-10">
<label for="bedrooms">Bedrooms</label>
<input type="text" class="form-control" id="bedrooms">
</div>
<div class="col-sm-4 m-b-10">
<label for="Square-ft">Square ft </label>
<input type="text" class="form-control" id="Square-ft">
</div>
<div class="col-sm-4 m-b-10">
<label for="car-parking">Car Parking</label>
<input type="text" class="form-control" id="car-parking">
</div>
</div>
</div>
</div>
<!-- end class p-20 -->
</div>
<!-- end col -->
<div class="col-xs-12 col-md-6">
<div class="p-20">
<div class="form-group m-b-20">
<label>General Amenities</label>
<div class="row">
<div class="col-xs-6">
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox1" type="checkbox" checked="">
<label for="checkbox1">
Swimming pool
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">
Terrace
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">
Air conditioning
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox4" type="checkbox" checked="">
<label for="checkbox4">
Internet
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox5" type="checkbox">
<label for="checkbox5">
Balcony
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox6" type="checkbox" checked="">
<label for="checkbox6">
Cable TV
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox7" type="checkbox" checked="">
<label for="checkbox7">
Computer
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox8" type="checkbox">
<label for="checkbox8">
Grill
</label>
</div>
</div>
<!-- end col -->
<div class="col-xs-6">
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox9" type="checkbox">
<label for="checkbox9">
Dishwasher
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox10" type="checkbox">
<label for="checkbox10">
Near Green Zone
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox11" type="checkbox" checked="">
<label for="checkbox11">
Near Church
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox12" type="checkbox">
<label for="checkbox12">
Near Hospital
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox13" type="checkbox" checked="">
<label for="checkbox13">
Near School
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox14" type="checkbox" checked="">
<label for="checkbox14">
Near Shop
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox15" type="checkbox" checked="">
<label for="checkbox15">
Oven
</label>
</div>
<div class="checkbox checkbox-primary m-b-15">
<input id="checkbox16" type="checkbox">
<label for="checkbox16">
Cofee pot
</label>
</div>
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
</div>
<!-- end class p-20 -->
</div>
<!-- end col -->
</div>
<!-- end row -->
<div class="text-center">
<button type="submit" class="btn btn-success waves-effect waves-light">Submit</button>
<button type="button" class="btn btn-danger waves-effect waves-light">Delete</button>
</div>
</form>
<!-- end form -->
</div>
<!-- end card-box -->
</div>
<!-- end col -->
</div>
</div>
<!-- end container -->
<!-- end row -->
<!-- Footer -->
<div class="footer" style="clear:both;">
<?php
include "../includes/footer.php";
?>
</div>
<!-- End Footer -->
</div>
</body>
</html>