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

我正在更新复选框输入以使用美国网页设计标准中的样式。但是，当我尝试更新仍在我们的 .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;
}