Question

删除了哪些代码＆＃34;＆＃34;有关必填字段的提示？

<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标签，而不是您的无线电输入，以便进行选择。您将输入设置为display: none，因此不显示没有输入的相关错误。您需要显示输入并编辑输入本身的样式，以便在没有输入时正确显示错误。

编辑：以下是您的代码示例，该代码将与我所说的一致。

＆＃13;

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; }

＆＃13;

<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>

＆＃13;

编辑2：另一种（不可否认的是hacky）这样做的方法是在输入本身设置负z-index，这样它们就不会出现在标签内部。错误仍然显示在输入组附近，但输入是＆＃34;在＆＃34;标签（并未设置为display: none），因此错误显示输入的位置。

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

Answer 2

您的代码可能需要采用某种形式，以便required能够正常运行。

<强>代码：

<!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 线上离线

提示＆＃34;必需＆＃34;没有显示

3 个答案: