Radio buttons and checkboxes not appearing - html

Question

I am trying to launch a Web UI using Flask, however, the radio buttons and check boxes aren't showing. I've tried following online examples, like the ones here: https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp
The CSS file has a lot of sections pertaining to checkboxes/radios, but I'm not sure which part is the source of the problem (if that).
Here is the relevant portion of the CSS file:
/* Form */
form {
margin: 0 0 2em 0;
}
label {
display: block;
font-size: 0.9em;
font-weight: 400;
margin: 0 0 1em 0;
}
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
border-radius: 4px;
border: none;
border: solid 1px;
color: inherit;
display: block;
outline: 0;
padding: 0 1em;
text-decoration: none;
width: 100%;
}
input[type="text"]:invalid,
input[type="password"]:invalid,
input[type="email"]:invalid,
select:invalid,
textarea:invalid {
box-shadow: none;
}
.select-wrapper {
text-decoration: none;
display: block;
position: relative;
}
.select-wrapper:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
.select-wrapper:before {
content: '\f078';
display: block;
height: 2.75em;
line-height: 2.75em;
pointer-events: none;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 2.75em;
}
.select-wrapper select::-ms-expand {
display: none;
}
input[type="text"],
input[type="password"],
input[type="email"],
select {
height: 2.75em;
}
textarea {
padding: 0.75em 1em;
}
input[type="checkbox"],
input[type="radio"] {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
display: block;
float: left;
margin-right: -2em;
opacity: 0;
width: 1em;
z-index: -1;
}
input[type="checkbox"]+label,
input[type="radio"]+label {
text-decoration: none;
cursor: pointer;
display: inline-block;
font-size: 1em;
font-weight: 200;
padding-left: 2.4em;
padding-right: 0.75em;
position: relative;
}
input[type="checkbox"]+label:before,
input[type="radio"]+label:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
input[type="checkbox"]+label:before,
input[type="radio"]+label:before {
border-radius: 4px;
border: solid 1px;
content: '';
display: inline-block;
height: 1.65em;
left: 0;
line-height: 1.58125em;
position: absolute;
text-align: center;
top: 0;
width: 1.65em;
}
input[type="checkbox"]:checked+label:before,
input[type="radio"]:checked+label:before {
content: '\f00c';
}
input[type="checkbox"]+label:before {
border-radius: 4px;
}
input[type="radio"]+label:before {
border-radius: 100%;
}
::-webkit-input-placeholder {
opacity: 1.0;
}
:-moz-placeholder {
opacity: 1.0;
}
::-moz-placeholder {
opacity: 1.0;
}
:-ms-input-placeholder {
opacity: 1.0;
}
.formerize-placeholder {
opacity: 1.0;
}
label {
color: #444444;
}
input[type="text"],
input[type="password"],
input[type="email"],
select,
textarea {
background: rgba(144, 144, 144, 0.075);
border-color: #666666;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
border-color: #EF6480;
box-shadow: 0 0 0 1px #EF6480;
}
.select-wrapper:before {
color: #666666;
}
input[type="checkbox"]+label,
input[type="radio"]+label {
color: #666666;
}
input[type="checkbox"]+label:before,
input[type="radio"]+label:before {
background: rgba(144, 144, 144, 0.075);
border-color: #666666;
}
input[type="checkbox"]:checked+label:before,
input[type="radio"]:checked+label:before {
background-color: #EF6480;
border-color: #EF6480;
color: #ffffff;
}
input[type="checkbox"]:focus+label:before,
input[type="radio"]:focus+label:before {
border-color: #EF6480;
box-shadow: 0 0 0 1px #EF6480;
}
::-webkit-input-placeholder {
color: #999999 !important;
}
:-moz-placeholder {
color: #999999 !important;
}
::-moz-placeholder {
color: #999999 !important;
}
:-ms-input-placeholder {
color: #999999 !important;
}
.formerize-placeholder {
color: #999999 !important;
}
Here is the relevant portion of the HTML file:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Wrapper -->
<div id="wrapper">
<!-- Banner -->
<section id="intro" class="main">
<span class="icon fa-diamond major"></span>
<h3>Please upload your authors list below</h3>
<form action="" method=post enctype=multipart/form-data>
<p><input type=file name=file>
<br><br>
<input type="checkbox" name="sep1" value="Separate initials with period"> Separate initials with period<br>
<input type="checkbox" name="sep2" value="Separate initials with space"> Separate initials with space<br>
<input type="radio" name="affiliation" value="Mark affiliations with letter"> Mark affiliations with letter
<input type="radio" name="affiliation" value="Mark affiliations with number" checked> Mark affiliations with number<br><br>
<input type=submit value=Upload></p>
</form>
</section>
</div>

Answer 1

You can Simplify your CSS from :
input[type="checkbox"], input[type="radio"] {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
display: block;
float: left;
margin-right: -2em;
opacity: 0;
width: 1em;
z-index: -1;
}
Into This 1
input[type="checkbox"], input[type="radio"] {
width: 1em;
z-index: -1;
}
Or You can just Delete that part of your CSS

Answer 2

Here is the problematic section of your css:
input[type="checkbox"],
input[type="radio"] {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
display: block;
float: left;
margin-right: -2em;
opacity: 0;
width: 1em;
z-index: -1;
}
Change opacity to 1
Get rid of the appearance none.
There are other problems with your code but this solves your question about the boxes not appearing.
This should get you closer to what you are looking for:
input[type="checkbox"],
input[type="radio"] {
display: inline-block;
opacity: 1;
width: 1em;
z-index: -1;
}

Answer 3

It can happen because of multiple reasons, however
opacity: 1;
is one of the crucial things if your checkbox is not visible. Secondly, your position should not be absolute, it should be like
position: relative;
Just in case you are not able to click/check your checkbox, it's because you have blocked pointer-events. So change it to
pointer-events: all;
In all, your CSS code will look like this,
input[type="checkbox"]{
width: 1em;
position: relative;
opacity: 1;
pointer-events: all;
}
Note: In case if you still fail to achieve the desired result, try this code
input[type="checkbox"]{
width: 1em;
position: relative !important;
opacity: 1 !important;
pointer-events: all !important;
}