Question

我正在努力更新复选框输入以使用美国网页设计标准中的样式。但是，当我尝试更新仍在我们的.NET应用程序中具有runat =“server”属性的页面中的复选框时，我遇到了一个问题。如果没有runat =“server”属性，则复选框将呈现为https://standards.usa.gov/components/form-controls/。使用runat =“server”属性，只有方形轮廓渲染并单击它不会做任何事情 - 它不会将背景更改为蓝色，也不会插入复选标记svg。任何帮助理解正在进行的操作以使样式与runat =“server”一起使用将不胜感激。

这是.NET代码

<fieldset class="fieldsGroup standardFieldsGroup termsAndConditions" 
  runat="server" id="termsAndConditions">
  <legend><span class="uppercase small">Terms & Conditions</span></legend>
    <div class="formField fieldTypeCheckbox authorized">
      <input type="checkbox" runat="server" id="idAuthorized" 
       name="authorized" class="authorized gs-input"/>
      <label for="idAuthorized" class="gs-input">I am authorized by this 
       organization to update the information on their Page
      </label>
      <span class="validators">
       <span id="idAuthorizedValidator" class="displayHidden">You must be 
        authorized to update the information on this organization's 
        Page Form</span>
      </span>
    </div>
    <div class="formField fieldTypeCheckbox acceptTerms">
      <input type="checkbox" runat="server" id="idAcceptTerms" 
       name="acceptTerms" class="acceptTerms gs-input" />
      <label for="idAcceptTerms" class="gs-input">I agree to X's <a 
       id="aTermsAndConditions" href="https://x.org/terms-of-
       use" target="_blank" class="black-link underline">Terms and 
       Conditions</a>
      </label>
      <span class="validators">
        <span id="idAcceptTermsValidator" class="displayHidden">You must 
         agree to the X Terms and 
         Conditions
        </span>
      </span>
    </div>
 </fieldset>

以下是CSS

input.gs-input {
  //webkit-appearance: none;
  //-moz-appearance: none;
  //appearance: none;
  border: 0.1rem solid #5b616b;
  border-radius: 0;
  box-sizing: border-box;
  color: #212121;
  display: block;
  font-size: 1.7rem;
  height: 4.4rem;
  line-height: 1.3;
  margin: 0.2em 0;
  max-width: 46rem;
  padding: 1rem 0.7em;
  width: 100%;
}

label.gs-input {
  position: relative;
  left: 30px;
}

input.gs-input[type="checkbox"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

input.gs-input[type=checkbox] {
  position: absolute;
  left: -999em;
}

.lt-ie9 [type=checkbox], .lt-ie9
[type=radio] {
  border: 0;
  float: left;
  margin: 0.4em 0.4em 0 0;
  position: static;
  width: auto;
}

[type=checkbox] + label.gs-input {
  cursor: pointer;
  font-weight: 400;
  margin-bottom: 0.65em;
}

[type=checkbox] + label.gs-input::before {
  background: #ffffff;
  border-radius: 2px;
  box-shadow: 0 0 0 1px #757575;
  content: '\a0';
  display: inline-block;
  height: 2rem;
  line-height: 2rem;
  margin-right: 0.6em;
  text-indent: 0.15em;
  vertical-align: middle;
  width: 2rem;
  position: absolute;
  left: -30px;
}

[type=checkbox]:checked + label.gs-input::before {
  background-color: #0071bc;
  box-shadow: 0 0 0 1px #0071bc;
}

[type=checkbox]:checked + label.gs-input::before {
  background-image: url("../img/correct8.png");
  background-image: url("../img/correct8.svg");
  background-position: 50%;
  background-repeat: no-repeat;
}

[type=checkbox]:disabled + label.gs-input {
  color: #d6d7d9;
}

[type=checkbox]:focus + label.gs-input::before {
  outline: 2px dotted #aeb0b5;
  outline-offset: 3px;
}

[type=checkbox]:disabled + label.gs-input::before {
  background: #f1f1f1;
  box-shadow: 0 0 0 1px #aeb0b5;
  cursor: not-allowed;
}

Answer 1

抱歉不是真的答案;必须发布在这里，以便我可以添加图像。

我没有遇到此问题，但确实需要一段时间来处理页面外的复选框和标签。

我确定您已经涵盖了这一点，但为了以防万一，请确保您正在访问正确的元素。复选框为left: -999em;，标签为-30。我把它们拿走了，所以我可以看到它们并得到它（在创建图像并将其放在正确的位置之后）。

Answer 2

我根据@wazz评论做了一些关于在web.config文件中设置ClientIdMode="Static"的研究。但是，我并不想影响整个应用程序;只是具体的输入。我遇到了这个博客 https://weblogs.asp.net/scottgu/cleaner-html-markup-with-asp-net-4-web-forms-client-ids-vs-2010-and-net-4-0-series

它提到clientIdMode="Static"可以应用于单个元素。我修改了输入，如下所示，它解决了我的问题。

<input type="checkbox" clientIdMode="Static" runat="server" id="idAuthorized" name="authorized" class="authorized"/>

Answer 3

我认为值得尝试静态。 Static将呈现您在页面上使用的ID，AutoID“将每个父命名容器的ID值与控件的ID值连接起来。”

输入不适用于runat服务器的CSS样式

3 个答案: