Question

我正在设计一个复选框。文件fin1.cfm中的HTML是：

 label {  
    display: inline-block;  
    cursor: pointer;  
    position: relative;  
    padding-left: 25px;
    padding-top: 15px;  
    margin-right: 0px;  
    font-size: 13px;  
} 

input[type=checkbox] {  
    display: none;  
}

label:before {  
content: "";  
display: inline-block;  
width: 30px;  
height: 20px;  
margin-right: 0px;  
position: absolute; 
left: 10;  
bottom: 1px;  
background-color: #E6F2F0;     
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); 
border-radius: 10px 10px 10px 10px;
 }  

input[type=checkbox]:checked + label:before {  
   content: "D"; 
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
    font-size: 15px;  input[type=checkbox]:checked + label:before
    color: red;
    text-align: center;  
    line-height: 15px;
    padding-top: 7px;         
}

文件betty.css中的CSS是：

input[type=checkbox]:checked + label:before

我的问题在于dplyr声明中的内容。

在一个地方，我确实需要内容为“D”，如图所示。但是，我还有另一个地方，我希望内容是其他内容，例如复选标记。

我似乎无法找到一种方法来构建它以获得该结果。我已经尝试将该语句放在一个不同的CSS文件中，但是在调用程序中调用了betty.css文件，显然它是规则的。我也尝试为该语句设置一个类，并在HTML标签标签中引用它，但我无法使其工作。

有人可以告诉我如何在不同的地方获取不同的内容吗？

Answer 1

我不确定我是否理解正确，但您可以为所有复选框设置一个通用规则，后跟特定复选框的更具体规则（从通用规则覆盖一个属性）。

有些事情：

更新（根据评论）

/* this is the default setting for all checkboxes */
    input[type=checkbox]:checked + label:before {
      content: "D";
    }

    /* you could list ids here or simply add another class (like .customCheck below) */
    input#cb_f:checked + label:before,
    input.customCheck:checked + label:before,
    input#cb_f3:checked + label:before {
      content: "\2713";
    }

使用自定义类（.customCheck - 您可以调用任何内容）比列出所有可能的id更容易。

如果使用自定义类，只需将其添加到HTML中，就像我最后一样：

<input type="checkbox" id="cb_f2" name="datesumm" value="" class="customCheck">

＆＃13;

label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left: 25px;
  padding-top: 15px;
  margin-right: 0px;
  font-size: 13px;
}
input[type=checkbox] {
  display: none;
}
label:before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 20px;
  margin-right: 0px;
  position: absolute;
  left: 10;
  bottom: 1px;
  background-color: #E6F2F0;
  box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
  border-radius: 10px 10px 10px 10px;
}

/* this is the default setting for all checkboxes */
input[type=checkbox]:checked + label:before {
  content: "D";
}

/* you could list ids here or simply add another class (like .customCheck below) */
input#cb_f:checked + label:before,
input.customCheck:checked + label:before,
input#cb_f3:checked + label:before {
  content: "\2713";
}

＆＃13;

<table>
  <tr>
    <td>Master Event:</td>
    <td>
      <input type="checkbox" id="cb_e" name="datesumm" value="">
      <label for="cb_e">&nbsp;</label>
    </td>
  </tr>
  <tr>
    <td>Master Event2:</td>
    <td>
      <input type="checkbox" id="cb_e2" name="datesumm" value="">
      <label for="cb_e2">&nbsp;</label>
    </td>
  </tr>
  <tr>
    <td>Master Event3:</td>
    <td>
      <input type="checkbox" id="cb_e3" name="datesumm" value="">
      <label for="cb_e3">&nbsp;</label>
    </td>
  </tr>
  <tr>
    <td>Secondary Event:</td>
    <td>
      <input type="checkbox" id="cb_f" name="datesumm" value="">
      <label for="cb_f">&nbsp;</label>
    </td>
  </tr>
  <tr>
    <td>Secondary Event2:</td>
    <td>
      <input type="checkbox" id="cb_f2" name="datesumm" value="" class="customCheck">
      <label for="cb_f2">&nbsp;</label>
    </td>
  </tr>
  <tr>
    <td>Secondary Even3:</td>
    <td>
      <input type="checkbox" id="cb_f3" name="datesumm" value="" class="customCheck">
      <label for="cb_f3">&nbsp;</label>
    </td>
  </tr>
</table>

＆＃13;

如何使用label语句设置正确的级联

1 个答案: