css - 提示 "required"未显示

Question

哪段代码“删除”了有关必填字段的提示？

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

首先要解决的是它不在 form 标签中，正如 Leon 所指出的那样。

发生的事情是您的 CSS 正在设置您的 HTML 标签的样式，而不是您的 radio 输入，以供选择。您将输入设置为 display: none，因此不会显示没有输入的相关错误。您需要显示输入并编辑输入本身的样式，以便在没有输入时正确显示错误。

编辑:这是您的代码示例，可以与我所说的配合使用。

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>

编辑 2:另一种(公认的 hacky)方法是在输入本身上设置负 z-index，这样它们就不会出现在标签本身内。错误仍然显示在输入组附近，但输入位于标签“下方”(并且未设置为 display: none)，因此错误显示在输入所在的位置。

.switch-field input {
  position: absolute;
  z-index: -10000;
}