Hint "required" is not shown - css

Question

What piece of code "deleted" the hint about required field?
https://jsfiddle.net/venntr/qegxnjm2/
<div class="switch-field">
<input type="radio" id="onlinetak" name="online" required/>
<label for="onlinetak">Online</label>
<input type="radio" id="onlinenie" name="online" required />
<label for="onlinenie">Offline</label>
</div>

Answer 1

The first thing to fix is that it is not in a form tag, as was pointed out by Leon.
What's happening is that your CSS is styling your HTML labels, not your radio inputs, to be selected. You set the inputs to be display: none, so the associated errors with there being no input do not display. You need to show the inputs and edit the styling of the inputs themselves so that the error properly appears if there is no input.
EDIT: Here's an example of your code that will work with what I said.
body {
background-color: #F7FCFF;
}
.QA radio {
-webkit-appearance: none;
background-color: #e1e1e1;
border: 4px solid #e1e1e1;
border-radius: 10px;
width: 100%;
display: inline-block;
position: relative;
width: 20px;
height: 20px;
}
.QA radio:checked {
background: grey;
border: 4px solid #e1e1e1;
}
input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}
.QA {
font: normal normal 14px/1 Helvetica;
margin: 1px;
border-radius:10px;
text-align:center;
}
.QA1 {
font: normal normal 14px/1 Helvetica;
border-radius:10px;
text-align:left;
}
.QA h2{
font: normal normal 16px/1 Helvetica;
font-weight: bold;
color:#004E97;
}
.QA button{
text-align:center;
width: auto;
background: #E2F4FE;
font-weight: bold;
font-size: 14px;
text-shadow: none;
color: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px;
cursor: pointer;
padding: 6px 14px;
margin: 2px;
outline: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.QA1 button{
text-align:left;
width: auto;
background: #E2F4FE;
font-weight: bold;
font-size: 14px;
text-shadow: none;
color: rgba(0, 0, 0, 0.6);
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px;
cursor: pointer;
padding: 6px 14px;
margin: 2px;
outline: 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.QA button:hover{
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60; background: #C1EEFE;
}
.QA1 button:hover{
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60; background: #C1EEFE;
}
textarea {
background-color: #FFFFFF;
}
.index {
z-index: 55;
}
.switch-field {
font-family: Helvetica;
padding: 10px;
overflow: hidden;
font-size:0px;
}
.switch-title {
margin-bottom: 6px;
}
.switch-field .input-field {
text-align:center;
display: inline;
width: auto;
background-color: #F2F0F0;
color: rgba(0, 0, 0, 0.6);
font-size: 14px;
font-weight: bold;
text-shadow: none;
padding: 6px 14px;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.switch-field label:hover {
cursor: pointer;
}
.switch-field input:checked + label {
background-color: #5EA8EE;
-webkit-box-shadow: none;
box-shadow: none;
}
.switch-field .input-field:first-of-type {
border-radius: 4px 0 0 4px;
}
.switch-field .input-field:last-of-type {
border-radius: 0 4px 4px 0;
}
#onlinetak:checked + label:first-of-type { background-color:#5EA8EE; }
#onlinenie:checked + label:last-of-type { background-color:#EE5B5B; }
<form>
<div class="switch-field">
<div class="input-field">
<input type="radio" id="onlinetak" name="online" required/>
<label for="onlinetak">Online</label>
</div>
<div class="input-field">
<input type="radio" id="onlinenie" name="online" required/>
<label for="onlinenie">Offline</label>
</div>
</div>
<button type="submit">Submit</button>
</form>
EDIT 2: Another (admittedly hacky) way of doing it is to set a negative z-index on the inputs themselves so that they don't appear to be inside the labels themselves. The error still shows near the input group, but the inputs are "under" the labels (and not set to display: none), so the error displays where the inputs are.
.switch-field input {
position: absolute;
z-index: -10000;
}

Answer 2

Your code may need to be in a form in order for your required to work.
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="switch-field">
<form>
<input id="onlinetak" name="online" type="radio"> <label for="onlinetak">Online</label> <input id="onlinenie" name="online" type="radio"> <label for="onlinenie">Offline</label> <button type="submit">Submit</button>
</form>
</div>
</body>
</html>
Jsfiddle - https://jsfiddle.net/qegxnjm2/1/

Answer 3

enter code here
Online
Offline