yashghelani yashghelani - 3 months ago 8
CSS Question

How do I add some space between the custom checkboxes and the labels?

I want to add some space between the custom checkboxes and the labels?

Here is the HTML:


<!-- Wrapper -->
<div id="wrapper">
<!-- Form Title -->
<div id="title">ENQUIRY FORM</div>

<!-- Form -->
<form id="form" action="" method="post">
<!-- Input Fields -->
<div id="input">
<!-- Form Sub-title -->
<span>PLEASE FILL THE FORM</span>

<div class="column">
<select>
<option selected="selected">Assign Project Owner</option>
</select>
<input type="text" placeholder="Society Name">
<textarea placeholder="Society Address"></textarea>
<select>
<option selected="selected">Reference</option>
</select>
</div>

<div class="column">
<input type="text" placeholder="Area / Location">
<input type="text" placeholder="Contact Person">
<input type="text" placeholder="Contact Number">
<input type="text" placeholder="Enter Your Email Address">
</div>

<div id="row">
<div class="row-column">
Work Scope
</div>

<div class="row-column">
<input type="checkbox" id="c1">
<label for="c1">Civil Works</label>
<br>
<input type="checkbox" id="c2">
<label for="c2">Waterproofing</label>
<br>
<input type="checkbox" id="c3">
<label for="c3">Plumbing</label>
<br>
<input type="checkbox" id="c4">
<label for="c4">Painting</label>
<br>
<input type="checkbox" id="c5">
<label for="c5">Other</label>
</div>

<div class="row-column">
<input type="checkbox" id="c6">
<label for="c6">Pest Control</label>
<br>
<input type="checkbox" id="c7">
<label for="c7">Consultation</label>
<br>
<input type="checkbox" id="c8">
<label for="c8">Pigeon Net Fixing</label>
<br>
<input type="checkbox" id="c9">
<label for="c9">Rainwater Harvesiting</label>
</div>
</div>
</div>

<!-- Submit Button -->
<button type="submit" form="form" value="Submit">SUBMIT</button>
</form>
</div>


Here is the CSS:


html {
margin: 0;
padding: 0;
background: url("img/background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: "Exo";
font-weight: 500;
}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

#wrapper {
position: absolute;
left: 0;
right: 0;
margin: auto;
margin-top: 100px;
margin-bottom: 100px;
width: 1000px;
background: url("img/pattern.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

#title {
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
height: 50px;
line-height: 50px;
color: #353535;
font-size: 30px;
color: #686868;
}

#form {
display: block;
}

#input {
display: block;
margin: auto;
margin-bottom: 50px;
width: 700px;
height: 800px;
-webkit-box-shadow: 2px 0px 2px #ccc, -2px 0px 2px #ccc, 0px 2px 2px #ccc;
-moz-box-shadow: 2px 0px 2px #ccc, -2px 0px 2px #ccc, 0px 2px 2px #ccc;
box-shadow: 2px 0px 2px #ccc, -2px 0px 2px #ccc, 0px 2px 2px #ccc;
background-color: #f8f8f8;
}

span {
display: block;
padding-left: 33px;
padding-top: 50px;
height: 25px;
line-height: 25px;
font-size: 20px;
color: #1aaede;
}

.column {
float: left;
margin-top: 50px;
margin-left: 33px;
width: 300px;
height: 400px;
}

::-webkit-input-placeholder {
color: #000;
}

::-moz-placeholder {
color: #000;
}

:-ms-input-placeholder {
color: #000;
}

:-moz-placeholder {
color: #000;
}

input[type="text"] {
display: block;
height: 50px;
width: 100%;
margin-bottom: 40px;
padding-left: 20px;
font-size: 17px;
border: 0;
outline: none;
-webkit-box-shadow: 2px 0px 2px #ccc, -2px 0px 2px #ccc, 0px 2px 2px #ccc;
-moz-box-shadow: 2px 0px 2px #ccc, -2px 0px 2px #ccc, 0px 2px 2px #ccc;
box-shadow: 2px 0px 2px #ccc, -2px 0px 2px #ccc, 0px 2px 2px #ccc;
font-family: "Exo";
font-weight: 500;
background-color: #fbfbfb;
}

select {
display: block;
height: 50px;
width: 100%;
margin-bottom: 40px;
font-size: 17px;
-webkit-appearance: none;
border-radius: 0;
border: 0;
outline: none;
padding-left: 20px;
-webkit-box-shadow: 2px 0px 2px #ccc, -2px 0px 2px #ccc, 0px 2px 2px #ccc;
-moz-box-shadow: 2px 0px 2px #ccc, -2px 0px 2px #ccc, 0px 2px 2px #ccc;
box-shadow: 2px 0px 2px #ccc, -2px 0px 2px #ccc, 0px 2px 2px #ccc;
background: url("img/arrow.png") no-repeat 260px white;
font-family: "Exo";
font-weight: 500;
background-color: #fbfbfb;
}

textarea {
display: block;
height: 140px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 40px;
padding-left: 20px;
padding-top: 13px;
font-size: 17px;
border: 0;
outline: none;
overflow-y: scroll;
resize: none;
-webkit-box-shadow: 2px 0px 2px #ccc, -2px 0px 2px #ccc, 0px 2px 2px #ccc;
-moz-box-shadow: 2px 0px 2px #ccc, -2px 0px 2px #ccc, 0px 2px 2px #ccc;
box-shadow: 2px 0px 2px #ccc, -2px 0px 2px #ccc, 0px 2px 2px #ccc;
font-family: "Exo";
font-weight: 500;
background-color: #fbfbfb;
}

#row {
float: left;
margin-top: 50px;
margin-left: 33px;
}

.row-column:nth-child(1) {
width: 130px;
padding-left: 20px;
}

.row-column:nth-child(2) {
width: 250px;
}

.row-column:nth-child(3) {
width: 250px;
}

.row-column {
float: left;
}

input[type="checkbox"] {
display: inline-block;
opacity: 0;
width: 18px;
margin-bottom: 20px;
background-color: #fbfbfb;
}

input[type="checkbox"] + label {
display: inline-block;
padding: 5px 0 4px 24px;
cursor: pointer;
background: url("img/unticked.png") left center no-repeat;
}

input[type="checkbox"]:checked + label {
background: url("img/ticked.png") left center no-repeat;
}

button {
margin: auto;
margin-bottom: 50px;
border: none;
display: block;
width: 130px;
height: 50px;
line-height: 40px;
font-size: 20px;
color: #f2f2f2;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
font-family: "Exo";
font-weight: 500;
background: #1aaede;
background: -webkit-linear-gradient(#1aaede, #108bb3);
background: -o-linear-gradient(#1aaede, #108bb3);
background: -moz-linear-gradient(#1aaede, #108bb3);
background: linear-gradient(#1aaede, #108bb3);
}


Here is the link to the page I'm experiencing this problem on - link

And here's the fiddle for the code (it won't display the custom checkboxes) - Fiddle

Answer

Just add the below css, It may works!


input[type="checkbox"] + label {
    display: inline-block;
    padding: 5px 0px 3px 30px;
    cursor: pointer;
    background: url("img/unticked.png") left center no-repeat;
}

I just made the changes on padding padding: 5px 0px 3px 30px;