入力CSSスタイルがrunatサーバで動作しない

Question

私は、US Web Design Standardsのスタイルを使用するためのチェックボックス入力の更新に取り組んでいます。しかし、私はrunat = "server"属性を持つ.NETアプリケーション内のページのチェックボックスを更新しようとすると問題に遭遇しました。 runat = "server"属性がない場合、チェックボックスはhttps://standards.usa.gov/components/form-controls/のようにレンダリングされます。 runat = "server"属性では、四角いアウトラインだけがレンダリングされてクリックされますが、背景は青色に変わらず、チェックマークsvgも挿入されません。 スタイルをrunat = "server"で動作させるために何が起こっているのかを理解する助けとなることは、非常に感謝しています。

これは、次の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

私は、web.configファイルでClientIdMode="Static"の設定に関する上記@wazzコメントに基づいて、研究のビットをしました。しかし、アプリケーション全体に影響を与えたくはありませんでした。特定の入力のみ。私はこのブログに出会いました 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 2

申し訳ありません、本当に答えでthe.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> 

です。私は画像を追加することができるようにここに投稿する必要があります。

私はこれに問題はありませんが、ページ外にあるチェックボックスとラベルを処理するのに時間がかかりました。

これをカバーしていると確信していますが、その場合は正しい要素にアクセスしていることを確認してください。チェックボックスはleft: -999em;、ラベルは-30です。私はそれらを見たので、私はそれらを見ることができ、これを得ました（イメージを作成し、それを正しい場所に置いた後）。

Answer 3

私はそれが静的に試してみる価値だと思います。 Staticは、あなたがページ上で使用するIDをレンダリングし、AutoIDは各親命名コンテナのID値をコントロールのID値と連結します。