Good day all. I have a small problem whereby i want my checkboxes for the course preferences to be in the middle not towards the right in the same position as the other textboxes at the bottom. i want it to be the center in the page. Like somewhere starting after the letter D in academic. No matter what i try, the checboxes are bounded to the right side. I tried to float it but it does not work.
body {
background: url(ewp.jpg);
background-size: cover;
}
.firstform {
order-radius: 5px;
background: green;
padding: 20px;
width: 550px;
margin: auto;
color: #fff;
font-size: 16px;
font-family: verdana;
margin-top: 100px;
opacity: 0.8;
}
.firstform h1 {
text-align: center;
margin: 0;
padding: 0;
}
.firstform input,
select {
width: 50%;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 18px;
background: black;
color: white;
opacity: 0.9;
/* removed margin-left */
}
.container {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
margin-left: 24em;
cursor: pointer;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.containertwo {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
cursor: pointer;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide browser default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 15px;
width: 15px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input~.checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked~.checkmark {
background-color: #2196f3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked~.checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 6px;
left: 6px;
width: 4px;
height: 4px;
border-radius: 50%;
background: white;
}
.buttonHolder {
display: block;
margin: 0 auto;
}
.firstform input[type="submit"]:hover {
background: #45a049;
transparent: 0.6s;
}
.firstform input[type="reset"]:hover {
background: #45a059;
transparent: 0.6s;
}
label > span, p > span {
width: 50%;
display: inline-block;
}
This is the html code.
<!DOCTYPE HTML>
<html>
<head>
<title>Register Form</title>
<link rel="stylesheet" type="text/css" href="report.css">
</head>
<body>
<form action="Form2.php" method="POST">
<div class="firstform">
<h1>COURSE PREFERENCE</h1>
<div class="outer-container">
<p><label class="container">Information Technology
<input type="checkbox" name="course" value = "Information Technology">
<span class="checkmark"></span></label></p>
<p><label class="container">Management
<input type="checkbox" name="course" value = "Management">
<span class="checkmark"></span></label></p>
<p><label class="container">Business Administration
<input type="checkbox" name="course" value = "Business Administration">
<span class="checkmark"></span></label></p>
<p><label class="container">Culinary Arts
<input type="checkbox" name="course" value = "Culinary Arts">
<span class="checkmark"></span></label></p>
<p><label class="container">Early Childhood Education
<input type="checkbox" name="course" value = "Early Childhood Education">
<span class="checkmark"></span></label></p>
<p>
<label class="container">
Hotel Management<input type="checkbox" name="course"value = "Hotel Management">
<span class="checkmark"></span></label></p>
<h1>ACADEMIC QUALIFICATION</h1>
<p><label><span>Higher Qualification</span><select name="qualification">
<option selected>SPM</option>
<option>STPM</option>
<option>O-Level</option>
<option>Foundation</option>
<option>A-Level</option>
<option>others</option>
</select>
</label>
</p>
<p><label><span>Instituiton:</span><input type="text" name="address" size="30" /></label></p>
<p><label><span>Country:</span><select name="country">
<option selected>Malaysia</option>
<option>International</option>
</select>
</label>
</p>
<p>
<label><span>Date commenced </span></label><input type="date" name="date_commenced">
</p>
<p>
<label><span>Date completed</span></label><input type="date" name="date_complete">
</p>
<div class="buttonHolder">
<input type="submit" name="Insert"><input type="reset" name="Clear">
</div>
</form>
</div>
</body>
</html>
body {
background: url(ewp.jpg);
background-size: cover;
}
.firstform {
order-radius: 5px;
background: green;
padding: 20px;
width: 550px;
margin: auto;
color: #fff;
font-size: 16px;
font-family: verdana;
margin-top: 100px;
opacity: 0.8;
}
.firstform h1 {
text-align: center;
margin: 0;
padding: 0;
}
.firstform input,
select {
width: 50%;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 18px;
background: black;
color: white;
opacity: 0.9;
/* removed margin-left */
}
.container {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
margin-left: 24em;
cursor: pointer;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide browser default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 15px;
width: 15px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input~.checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked~.checkmark {
background-color: #2196f3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked~.checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 6px;
left: 6px;
width: 4px;
height: 4px;
border-radius: 50%;
background: white;
}
.buttonHolder {
display: block;
margin: 0 auto;
}
.firstform input[type="submit"]:hover {
background: #45a049;
transparent: 0.6s;
}
.firstform input[type="reset"]:hover {
background: #45a059;
transparent: 0.6s;
}
label>span,
p>span {
width: 50%;
display: inline-block;
}
<form action="Form2.php" method="POST">
<div class="firstform">
<h1>COURSE PREFERENCE</h1>
<p><label class="containertwo">Information Technology
<input type="checkbox" name="course" value = "Information Technology">
<span class="checkmark"></span></label></p>
<p><label class="containertwo">Management
<input type="checkbox" name="course" value = "Management">
<span class="checkmark"></span></label></p>
<p><label class="containertwo">Business Administration
<input type="checkbox" name="course" value = "Business Administration">
<span class="checkmark"></span></label></p>
<p><label class="containertwo">Culinary Arts
<input type="checkbox" name="course" value = "Culinary Arts">
<span class="checkmark"></span></label></p>
<p><label class="containertwo">Early Childhood Education
<input type="checkbox" name="course" value = "Early Childhood Education">
<span class="checkmark"></span></label></p>
<p>
<label class="containertwo">
Hotel Management<input type="checkbox" name="course"value = "Hotel Management">
<span class="checkmark"></span></label></p>
</div>
<h1>ACADEMIC QUALIFICATION</h1>
<p><label><span>Higher Qualification</span><select name="qualification">
<option selected>SPM</option>
<option>STPM</option>
<option>O-Level</option>
<option>Foundation</option>
<option>A-Level</option>
<option>others</option>
</select>
</label>
</p>
<p><label><span>Instituiton:</span><input type="text" name="address" size="30" /></label></p>
<p><label><span>Country:</span><select name="country">
<option selected>Malaysia</option>
<option>International</option>
</select>
</label>
</p>
<p>
<label><span>Date commenced </span></label><input type="date" name="date_commenced">
</p>
<p>
<label><span>Date completed</span></label><input type="date" name="date_complete">
</p>
<div class="buttonHolder">
<input type="submit" name="Insert"><input type="reset" name="Clear">
</div>
</form>
</div>
There are several ways to center elements with css, one way I use to center a group of elements, is by enclosing all those elements in a container tag like div and position this container tag.
So enclose all your checkbox tags, within a div tag with a class (for example) say "outer-container" and give it the following css:
.outer-container {
display: inline-block;
position: relative;
left: 50%;
transform: translateX(-50%);
}
and remove the margin-left from your .container css
I have made those changes in the below code snippet, do try this method out.
body {
background: url(ewp.jpg);
background-size: cover;
}
.firstform {
border-radius: 5px;
background: green;
padding: 20px;
width: 550px;
margin: auto;
color: #fff;
font-size: 16px;
font-family: verdana;
margin-top: 100px;
opacity: 0.8;
}
.firstform h1 {
text-align: center;
margin: 0;
padding: 0;
}
.firstform input,
select {
width: 50%;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 18px;
background: black;
color: white;
opacity: 0.9;
/* removed margin-left */
}
.outer-container {
display: inline-block;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.container {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
/* margin-left: 24em; */
cursor: pointer;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide browser default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 15px;
width: 15px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input~.checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked~.checkmark {
background-color: #2196f3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked~.checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 6px;
left: 6px;
width: 4px;
height: 4px;
border-radius: 50%;
background: white;
}
.buttonHolder {
display: block;
margin: 0 auto;
}
.firstform input[type="submit"]:hover {
background: #45a049;
transparent: 0.6s;
}
.firstform input[type="reset"]:hover {
background: #45a059;
transparent: 0.6s;
}
label>span,
p>span {
width: 50%;
display: inline-block;
}
<form action="Form2.php" method="POST">
<div class="firstform">
<h1>COURSE PREFERENCE</h1>
<div class="outer-container">
<p><label class="container">Information Technology
<input type="checkbox" name="course" value = "Information Technology">
<span class="checkmark"></span></label></p>
<p><label class="container">Management
<input type="checkbox" name="course" value = "Management">
<span class="checkmark"></span></label></p>
<p><label class="container">Business Administration
<input type="checkbox" name="course" value = "Business Administration">
<span class="checkmark"></span></label></p>
<p><label class="container">Culinary Arts
<input type="checkbox" name="course" value = "Culinary Arts">
<span class="checkmark"></span></label></p>
<p><label class="container">Early Childhood Education
<input type="checkbox" name="course" value = "Early Childhood Education">
<span class="checkmark"></span></label></p>
<p>
<label class="container">
Hotel Management<input type="checkbox" name="course"value = "Hotel Management">
<span class="checkmark"></span></label></p>
</div>
<h1>ACADEMIC QUALIFICATION</h1>
<p><label><span>Higher Qualification</span><select name="qualification">
<option selected>SPM</option>
<option>STPM</option>
<option>O-Level</option>
<option>Foundation</option>
<option>A-Level</option>
<option>others</option>
</select>
</label>
</p>
<p><label><span>Instituiton:</span><input type="text" name="address" size="30" /></label></p>
<p><label><span>Country:</span><select name="country">
<option selected>Malaysia</option>
<option>International</option>
</select>
</label>
</p>
<p>
<label><span>Date commenced </span></label><input type="date" name="date_commenced">
</p>
<p>
<label><span>Date completed</span></label><input type="date" name="date_complete">
</p>
<div class="buttonHolder">
<input type="submit" name="Insert"><input type="reset" name="Clear">
</div>
</div>
</form>
Make a little change to your css container class i.e. margin left value.
.container {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
margin-left: 15em; <-----Change Value Here
cursor: pointer;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
Related
Is it possible to style check box like this, and change its background!
tried shadow box and the outline
the best I have reach is with the :before method but still not close
here what I have tried
CSS
.table__check-box {
background-color: red;
position: relative;
height: 1.75rem;
width: 1.75rem;
margin-right: 2.3rem;
margin-top: 1rem;
}
.table__check-box--inactive {
background-color: #a4a9ae;
}
.table__check-box:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 5px;
border: 2px solid #ccc;
}
HTML
<input class="table__check-box" type="checkbox">
Input element does not have content, so there should be no :before. Better use table__check-box + label:before:
* {
box-sizing: border-box;
}
.table__check-box {
opacity: .3;// Just for display
// Uncomment:
// display: none;
}
.table__check-box + label {
background-color: red;
display: inline-block;
position: relative;
height: 1.75rem;
width: 1.75rem;
margin-right: 2.3rem;
margin-top: 1rem;
overflow: hidden;
border-radius: 5px;
border: 2px solid #ccc;
}
.table__check-box:not(:checked) + label {
background-color: #a4a9ae;
}
<div class="input-wrapper">
<input id="active-checkbox" class="table__check-box" type="checkbox"/>
<label for="active-checkbox"></label>
</div>
w3schools has a good post on this.
Tweaking their example slightly, you'll want to wrap your checkbox in a label, form elements should always have labels and it gives you the option to add an optional text label (like in the fiddle).
<label class="checkbox-container">
<input type="checkbox" checked="checked">
<span class="checkbox-state"></span>
</label>
<label class="checkbox-container">
<input type="checkbox">
<span class="checkbox-state"></span>
</label>
<label class="checkbox-container">
<input type="checkbox">
<span class="checkbox-state"></span>
</label>
/* Customize the label (the container) */
.checkbox-container {
display: block;
position: relative;
margin: 10px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Style the checkbox */
.checkbox-container input ~ .checkbox-state {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
display: block;
width: 20px;
height: 20px;
}
/* Style the checkbox */
.checkbox-container input:checked ~ .checkbox-state {
background-color: #ccc;
}
Working fiddle: https://jsfiddle.net/zano29jd/
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<!DOCTYPE html>
<html>
<body>
<h1>Custom Checkboxes</h1>
<div class="container">
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
<label>One</label>
</div>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
</body>
</html>
I would like to arrange the label tag on the same level and after the input tag. So I could give it a css tag, when the input tag is disabled. I can't figure out, how to do it. So I can give the label tag a opacity, when the input tag is disabled.
I tried it with a div, and arrange the label after the input or the span tag. But it doesn't work.
First Checkbox don't work, because I changed the label tag. But this is what I'd like to have.
Wrap your input & span into a label
<h1>Custom Checkboxes</h1>
<div class="container">
<label for="one">One
<input id="one" type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
https://jsfiddle.net/lalji1051/xtn3esqu/5/
You have to use position: absolute; for the label to make the clickable space larger.
/* The container */
.container {
display: block;
position: relative;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Additional styles */
.check-wrapper {
position: relative;
width: 100px;
}
label[for="check1"] {
position: absolute;
left: 0;
top: 0;
width: 100%;
padding-left: 30px;
cursor: pointer;
/* outline to see the difference */
border: 1px solid red;
}
<h1>Custom Checkboxes</h1>
<div class="container">
<!-- added a wrapper -->
<div class="check-wrapper">
<input id="check1" type="checkbox" checked="checked">
<span class="checkmark"></span>
<label for="check1">One</label>
</div>
</div>
Hope this helps
.customCheckBox__Wrapper {
display: flex;
width: auto;
flex-flow: row wrap;
flex-basis: auto;
position: relative;
box-sizing: border-box;
margin: 0.125em;
}
.customCheckBox__Wrapper * {
box-sizing: border-box;
}
.cstumLbl_ {
transition: all 200ms ease-in-out;
content: "";
display: flex;
flex: 0 auto auto;
padding: 0.125em 0.5em;
width: 100%;
position: relative;
line-height: 1.4em;
padding-left: 2.5em;
}
.cstumLbl_:hover {
cursor: pointer;
}
.glyp_checked {
display: block;
opacity: 1;
width: 24px;
height: 24px;
position: absolute;
left: 6.5px;
top: 0.5px;
fill: #ffffff;
z-index: 200;
margin-right: 1.75em;
border: 1px solid #808080;
transition: all 200ms ease-in-out;
}
.cstumChxBx_ {
display: inline;
position: absolute;
z-index: -10;
visibility: hidden;
opacity: 0;
width: 0;
height: 0;
left: 50%;
top: 50%;
}
.cstumChxBx_:checked+.cstumLbl_._SplCse__>.glyp_checked,
.cstumChxBx_:checked+.cstumLbl_._NrmlCse__>.glyp_checked,
.cstumChxBx_:checked+.cstumLbl_._RgsCse__>.glyp_checked {
display: block;
opacity: 1;
border-radius: 2px;
}
.cstumChxBx_:checked+.cstumLbl_._SplCse__>.glyp_checked {
background: #000080;
fill: #ffffff;
}
.cstumChxBx_:checked+.cstumLbl_._NrmlCse__>.glyp_checked {
background: #ffffff;
fill: #000000;
border-color: #000080;
}
.cstumChxBx_:checked+.cstumLbl_._RgsCse__>.glyp_checked {
background: #008080;
fill: #ffffff;
}
.cstumChxBx_:disabled+.cstumLbl_._SplCse__>.glyp_checked,
.cstumChxBx_:disabled:checked+.cstumLbl_._SplCse__>.glyp_checked,
.cstumChxBx_:disabled+.cstumLbl_._NrmlCse__>.glyp_checked,
.cstumChxBx_:disabled:checked+.cstumLbl_._NrmlCse__>.glyp_checked,
.cstumChxBx_:disabled+.cstumLbl_._RgsCse__>.glyp_checked,
.cstumChxBx_:disabled:checked+.cstumLbl_._RgsCse__>.glyp_checked {
background: rgba(120, 120, 120, 0.25);
border: 1px solid #787878;
display: block;
opacity: 0.2;
fill: #3f3f3f;
}
<svg style="display:none;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<symbol viewBox="0 0 24 24" id="checked_">
<path d="M18,6l-7.8,7.8c-0.4,0.4-1,0.4-1.4,0L6,10.9c-0.4-0.4-1-0.4-1.4,0l-0.7,0.7c-0.4,0.4-0.4,1,0,1.4l3.5,3.5l0,0L8.8,18
c0.4,0.4,1,0.4,1.4,0l9.9-9.9c0.4-0.4,0.4-1,0-1.4L19.4,6C19,5.6,18.4,5.6,18,6z"/>
</symbol>
</svg>
<span class="customCheckBox__Wrapper">
<input class="cstumChxBx_" disabled checked type="checkbox" id="normal_" />
<label class="cstumLbl_ _SplCse__" for="normal_">
<span class="glyp_checked">
<svg viewBox="0 0 24 24">
<use xlink:href="#checked_"/>
</svg>
</span>
<span>label 1</span>
</label>
</span>
<span class="customCheckBox__Wrapper">
<input class="cstumChxBx_" type="checkbox" id="Normal__" />
<label class="cstumLbl_ _NrmlCse__" for="Normal__">
<span class="glyp_checked">
<svg viewBox="0 0 24 24">
<use xlink:href="#checked_"/>
</svg>
</span>
<span>label 2</span>
</label>
</span>
<span class="customCheckBox__Wrapper">
<input class="cstumChxBx_" type="checkbox" id="intermediate_" />
<label class="cstumLbl_ _RgsCse__" for="intermediate_">
<span class="glyp_checked">
<svg viewBox="0 0 24 24">
<use xlink:href="#checked_"/>
</svg>
</span>
<span>label 3</span>
</label>
</span>
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 5px;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="container">
<h1>Custom Checkboxes</h1>
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I found a similar question to mine here but the accepted answer did not fix my issue.
Bring element to front using CSS
I have made custom check boxes and I am trying to bring them to the front. Here is my html:
<!DOCTYPE HTML>
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css">
<script src="javascript.js"></script>
</head>
<body>
<div id="Title">
<img src="" alt="WifiFinder.img" id="WifiFinderImg">
<input type="button" class="Headerbuttons" id="back" value="Actually, I already have an account!" onclick="document.location='searchpage.html';"/>
</div>
<div id="AccountRegistration">
<h2>Username</h2>
<input class="userinfo" type="text" value="Username Here"/>
<h2>Email Address</h2>
<input class="userinfo" type="email" value="Email Address"/>
<h2>Date of Birth</h2>
<input class="userinfo" type="date" value="DD/MM/YYYY"/>
<h2>Password</h2>
<input class="userinfo" type="password" value="Password"/>
<h2>Retype Password</h2>
<input class="userinfo" type="password" value="Password"/>
<label class="container">I have Read and Accept the Terms and Conditions
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">I have Read and Accept the Privacy Statement
<input type="checkbox">
<span class="checkmark"></span>
</label>
<input class="buttons" type="button" value="Create Account" onclick="alert('Hello World');"/>
</div>
</body>
The CSS for this is as follows:
:root{
--main-color: #0052CC;
--secondary-color: #172B4D;
--tertiary-color: #FFFFFF;
}
body {
background-color: var(--tertiary-color);
margin: 0%;
}
#Title {
position: absolute;
width: 100%;
height: 30%;
background-color: var(--main-color);
margin: 0%;
}
#WifiFinderImg{
position: absolute;
height: 100%;
width: 50%;
left: 0%;
bottom: 0%;
margin: 0%;
}
/*The main content on the account registration page*/
#AccountRegistration{
font-size: x-large;
position: absolute;
height: 70%;
overflow-y: scroll;
bottom: 0%;
color: var(--main-color);
width: 100%;
text-align: center;
border: var(--secondary-color) 1px solid;
}
/*Class to style user input feilds for account creation*/
.userinfo{
font-size: large;
width: 40%;
border: 0px;
border-bottom: 1px var(--main-color) solid;
text-align: center;
color: lightgrey;
}
/*Customize the label*/
.container {
display: block;
position: relative;
padding-left: 35px;
margin-top: 2%;
margin-bottom: 2%;
cursor: pointer;
font-size: x-large;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*Hide the browser's default checkbox*/
.container input {
position: relative;
opacity: 0;
cursor: pointer;
}
/*Create a custom checkbox*/
.checkmark {
position: relative;
top: 0;
left: 35%;
height: 25px;
width: 25px;
background-color: lightgray;
}
/*On mouse-over, add a light grey background color*/
.container:hover input ~ .checkmark {
background-color: lightslategrey;
}
/*When the checkbox is checked, add a main colour background*/
.container input:checked ~ .checkmark {
background-color: var(--main-color);
}
/*Create the checkmark*/
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/*Show the checkmark when checked*/
.container input:checked ~ .checkmark:after {
display: block;
}
/*Style the checkmark*/
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid var(--tertiary-color);
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/*Class to style all content buttons*/
.buttons{
position: relative;
margin-left: -10%;
margin-top: -5%;
margin-bottom: 2%;
top: 150%;
left: 5%;
font-size: x-large;
width: 20%;
height: 10%;
border: 1px var(--main-color) solid;
text-align: center;
background-color: var(--main-color);
color: var(--tertiary-color);
}
/*Hover action for content buttons*/
.buttons:hover{
background-color: var(--secondary-color);
border-color: var(--secondary-color);
}
/*Buttons in the header*/
.Headerbuttons{
width: 15%;
height: 10%;
position: absolute;
top: 10%;
right: 2%;
border: 1px var(--tertiary-color) solid;
text-align: center;
background-color: var(--main-color);
color: var(--tertiary-color);
}
/*Hover actions for buttons in the header*/
.Headerbuttons:hover{
background-color: var(--tertiary-color);
border-color: var(--tertiary-color);
color: var(--main-color);
}
It seems to work when I change the position of the checkbox from relative to absolute, but then the problem is that they are on different parts of the page for different sized screens.
Add display: inline-block;
Here is the working Snippet
:root {
--main-color: #0052CC;
--secondary-color: #172B4D;
--tertiary-color: #FFFFFF;
}
body {
background-color: var(--tertiary-color);
margin: 0%;
}
#Title {
position: absolute;
width: 100%;
height: 30%;
background-color: var(--main-color);
margin: 0%;
}
#WifiFinderImg {
position: absolute;
height: 100%;
width: 50%;
left: 0%;
bottom: 0%;
margin: 0%;
}
/*The main content on the account registration page*/
#AccountRegistration {
font-size: x-large;
position: absolute;
height: 70%;
overflow-y: scroll;
bottom: 0%;
color: var(--main-color);
width: 100%;
text-align: center;
border: var(--secondary-color) 1px solid;
}
/*Class to style user input feilds for account creation*/
.userinfo {
font-size: large;
width: 40%;
border: 0px;
border-bottom: 1px var(--main-color) solid;
text-align: center;
color: lightgrey;
}
/*Customize the label*/
.container {
display: block;
position: relative;
padding-left: 35px;
margin-top: 2%;
margin-bottom: 2%;
cursor: pointer;
font-size: x-large;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/*Hide the browser's default checkbox*/
.container input {
position: relative;
opacity: 0;
cursor: pointer;
}
/*Create a custom checkbox*/
.checkmark {
position: relative;
top: 4px;
left: 0;
height: 25px;
width: 25px;
background-color: lightgray;
display: inline-block; /* Added */
}
/*On mouse-over, add a light grey background color*/
.container:hover input ~ .checkmark {
background-color: lightslategrey;
}
/*When the checkbox is checked, add a main colour background*/
.container input:checked ~ .checkmark {
background-color: var(--main-color);
}
/*Create the checkmark*/
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/*Show the checkmark when checked*/
.container input:checked ~ .checkmark:after {
display: block;
}
/*Style the checkmark*/
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid var(--tertiary-color);
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/*Class to style all content buttons*/
.buttons {
position: relative;
margin-left: -10%;
margin-top: -5%;
margin-bottom: 2%;
top: 150%;
left: 5%;
font-size: x-large;
width: 20%;
height: 10%;
border: 1px var(--main-color) solid;
text-align: center;
background-color: var(--main-color);
color: var(--tertiary-color);
}
/*Hover action for content buttons*/
.buttons:hover {
background-color: var(--secondary-color);
border-color: var(--secondary-color);
}
/*Buttons in the header*/
.Headerbuttons {
width: 15%;
height: 10%;
position: absolute;
top: 10%;
right: 2%;
border: 1px var(--tertiary-color) solid;
text-align: center;
background-color: var(--main-color);
color: var(--tertiary-color);
}
/*Hover actions for buttons in the header*/
.Headerbuttons:hover {
background-color: var(--tertiary-color);
border-color: var(--tertiary-color);
color: var(--main-color);
}
<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="javascript.js"></script>
</head>
<body>
<div id="Title"> <img src="" alt="WifiFinder.img" id="WifiFinderImg">
<input type="button" class="Headerbuttons" id="back" value="Actually, I already have an account!" onclick="document.location='searchpage.html';"/>
</div>
<div id="AccountRegistration">
<h2>Username</h2>
<input class="userinfo" type="text" value="Username Here"/>
<h2>Email Address</h2>
<input class="userinfo" type="email" value="Email Address"/>
<h2>Date of Birth</h2>
<input class="userinfo" type="date" value="DD/MM/YYYY"/>
<h2>Password</h2>
<input class="userinfo" type="password" value="Password"/>
<h2>Retype Password</h2>
<input class="userinfo" type="password" value="Password"/>
<label class="container">I have Read and Accept the Terms and Conditions
<input type="checkbox">
<span class="checkmark"></span> </label>
<label class="container">I have Read and Accept the Privacy Statement
<input type="checkbox">
<span class="checkmark"></span> </label>
<input class="buttons" type="button" value="Create Account" onclick="alert('Hello World');"/>
</div>
</body>
</html>
The problem is indeed that you've used position relative and absolute amateur-ly (throughout the code).
Since you've mentioned that the checkboxes are used at multiple places, you need to a way to apply different styles. For that, I will add another class here.
Replace this:
<span class="checkmark"></span>
and this
.checkmark {
position: relative;
top: 0;
left: 35%;
height: 25px;
width: 25px;
background-color: lightgray;
}
With this:
<span class="checkmark customCheckmark"></span>
and this
.checkmark {
position: relative;
top: 0;
left: 35%;
height: 25px;
width: 25px;
background-color: lightgray;
}
.checkmark.customCheckmark {
position: absolute;
top: auto;
left: auto;
height: 25px;
width: 25px;
background-color: lightgray;
}
CSS-Tricks might be able to explain this in more depth.
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Note: As a general rule of thumb, try not to use too many position relatives and absolutes, they mess up your CSS in most cases. If you're a beginner in CSS, try using Flexbox, it's much easier to learn and implement than conventional CSS.
What is the best way to give a different color of my radio button as well the border color?
I tried using this code but it does not seem to work perfectly.
li.payment_method_bacs input[type='radio']:checked:before {
background: black !important;
content: "";
display: block;
position: relative;
top: 19px;
left: 3px;
width: 6px;
height: 6px;
border-radius: 50%;
border: 3px solid black;
}
li.payment_method_bacs input[type='radio']:checked:before {
background: black !important;
content: "";
display: block;
position: relative;
top: 19px;
left: 3px;
width: 6px;
height: 6px;
border-radius: 50%;
border: 3px solid black;
}
<input id="payment_method_bacs" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" checked="checked">
You are applying :after and :before on the input element which is invalid with css. So you need to wrap other things like a div to achieve this. The div will use the checked value of radio and with :after and :before element will do the thing as needed. I am using 2 approaches.
Approach 1: using div as faux element:
li {
list-style: none; display:inline-block; margin-right:20px;
}
.radioBox {
position: relative;
background: transparent;
z-index: 1;
width: 13px;
height: 13px;
cursor: pointer;
}
.radioBox>div {
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 13px;
height: 13px;
display: inline-block;
border: 2px solid black;
border-radius: 12px;
}
.radioBox>input {
position: absolute;
z-index: 2;
width: 13px;
height: 13px;
opacity: 0;
}
.radioBox > input:checked + div:after {
position: absolute;
content: " ";
font-size: 0;
display: block;
left: 1px;
top: 1px;
width: 10px;
height: 10px;
background: black;
border-radius: 10px;
}
<ul>
<li class="payment_method_bacs">
<div class="radioBox "><input id="payment_method_bacs" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" >
<div></div>
</div>
</li>
<li>
<div class="radioBox ">
<input id="payment_method_bacs1" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" checked="checked" >
<div></div>
</div>
</li>
</ul>
Approach 2 : Using label as faux element.
ul,li{list-style:none; display:inline-block;}
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
font-size: 13px;
}
input[type=radio] {
display: none;
}
label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background-color: #fff;
border:1px solid #000;
border-radius:50%;
}
.radio label:before {
border-radius: 8px;
}
input[type=radio]:checked + label:before {
content: "\2022";
color: #000;
font-size: 30px;
text-align: center;
line-height: 18px;
}
<ul>
<li>
<div class="radio">
<input id="payment_method_bacs" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" checked="checked">
<label for="payment_method_bacs">Visa</label>
</div>
</li>
<li>
<div class="radio">
<input id="payment_method_bacs1" type="radio" class="input-radio" name="payment_method" value="bacs" data-order_button_text="" >
<label for="payment_method_bacs1">Paypal</label>
</div>
</li>
</ul>
add html in input and lable tag input will be hide if check box will check than you can add style anything in lable
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label::before {
background: red none repeat scroll 0 0;
border: 0 solid #333;
content: "";
font-size: 0;
height: 20px;
width: 20px;
}
<span class="input-lif in-lidt">
<input class="contact_radio" id="rbsrt1" name="contact" value="individual" checked="checked" type="radio">
<label for="rbsrt1"> Individual </label>
</span>
Changing the appearance of form inputs it's a little bit tricky, as each browser renders them in a different manner.
To ensure you get the same result for different browsers, you might consider using an image (inline, or as a background image for the element containing the input) or an element, as your input display.
<label id="myLabel" for="payment_method_bacs">
<input id="payment_method_bacs"
type="radio"
class="input-radio"
name="payment_method"
value="bacs"
data-order_button_text=""
checked="checked">
</label>
#myLabel{
width: 20px;
height: 20px;
background: white;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
border:2px solid #ccc;
display:inline-block;
}
#myLabel input{
display:none;
}
Fiddle provided here: https://jsfiddle.net/omfv8qhj/
Is there any way to make checkboxes with rounded corners using bootstrap or some css property?
Just using css, however, you lose the checkbox tick.
.checkbox-round {
width: 1.3em;
height: 1.3em;
background-color: white;
border-radius: 50%;
vertical-align: middle;
border: 1px solid #ddd;
appearance: none;
-webkit-appearance: none;
outline: none;
cursor: pointer;
}
.checkbox-round:checked {
background-color: gray;
}
<input type="checkbox" class="checkbox-round" />
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 15px;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="checkbox">
<span class="checkmark"></span>
</label>
Try to do
body {
background-color: #f1f2f3;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.container {
margin: 0 auto;
}
.round {
position: relative;
}
.round label {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
height: 28px;
left: 0;
position: absolute;
top: 0;
width: 28px;
}
.round label:after {
border: 2px solid #fff;
border-top: none;
border-right: none;
content: "";
height: 6px;
left: 7px;
opacity: 0;
position: absolute;
top: 8px;
transform: rotate(-45deg);
width: 12px;
}
.round input[type="checkbox"] {
visibility: hidden;
}
.round input[type="checkbox"]:checked + label {
background-color: #66bb6a;
border-color: #66bb6a;
}
.round input[type="checkbox"]:checked + label:after {
opacity: 1;
}
<div class="container">
<div class="round">
<input type="checkbox" id="checkbox" />
<label for="checkbox"></label>
</div>
</div>
One of the Best And Easiest Method is to use CSS clip path property:
<input type="checkbox" id="checkbox" />
<label for="checkbox" >Option</label>
input[type="checkbox"] {
width: 45px; /* Set width */
height: 45px; /* Set height */
clip-path: circle(46% at 50% 50%); /* Set the clip path of circle*/
}
if you still see some pointed corners, try reducing the first percentage values, (where I have used 46%), play with it a little bit and it will definitely work.
Well, this is the simplest and optimal solution. You set appearance to none and then use clip-path when its checked.
.rounded-checkbox {
width:35px;
height: 35px;
border-radius: 50%;
vertical-align: middle;
border: 1px solid black;
appearance: none;
-webkit-appearance: none;
outline: none;
cursor: pointer;
}
.rounded-checkbox:checked {
appearance: auto;
clip-path: circle(50% at 50% 50%);
background-color: blue;
}
<input
type="checkbox"
class="rounded-checkbox"
id="checkbox"
/> <label for="checkbox">Checkbox</label>
in css you may play with height, width, border-radius. basically height and width should be equal and border-radius should be half of them.
if you are using bootstrap you can use this class and add it where your shape or in this case your checkbox class is: class="rounded-circle"
look: borders bootstrap 5
for example to make a checkbox rounded in bootstrap 5 (also working for v4):
<div class="form-check">
<input
class="form-check-input rounded-circle"
type="checkbox"
/>
<label class="form-check-label" for="flexCheck1">
rounded checkbox
</label>
</div>
CSS
.checkbox {
clip-path: circle(46% at 50% 50%);
}
HTML
<input type="checkbox" class="checkbox" />
No need to hide the default checkbox and create a custom just set the clip-path and you can easily achieve a circular checkbox.
I thing the best way to make a rounded corners is by using the border-radius property. This site has a nice collection of checkboxes.
For example:
cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
top: 0;
border-radius: 10px;
The last line(border-radius: 10px) will give you a checkbox with rounded corners.