Hi so I am trying to get my checkboxes to switch to a red background when they are checked. I am also having an issue with the footer showing up about halfway through the form. On all my other pages it pushes it to the bottom but on this page it seems to go right to around the submit button areas.
So far I have this for the css:
/* --- 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;
}
and for HTML I have this:
<!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>
I have been tweaking many things for the footer but changes to it are messing up my other pages and pushing it up to the middle of it because of empty space on those.
I have been trying everything for the Checkboxes as well but have not found out why its not taking the pseudo elements
All help is appreciated.
Thanks!
Aucun commentaire:
Enregistrer un commentaire