تغيير نمط/مظهر Asp:CheckBox باستخدام CSS

Question

أرغب في تغيير المظهر القياسي "ثلاثي الأبعاد" لمربع الاختيار القياسي asp.net ليقول 1 بكسل ثابتًا.إذا حاولت تطبيق التصميم على الحدود على سبيل المثال، فإنه يفعل ذلك تمامًا - يرسم مربع الاختيار القياسي بحد حوله - وهو أمر صالح على ما أعتقد.

على أية حال، هل هناك طريقة لتغيير كيفية تصميم مربع النص الفعلي؟

Answer 1

أعتقد أن أفضل طريقة لجعل CheckBox يبدو مختلفًا تمامًا هو عدم استخدام التحكم في مربع الاختيار على الإطلاق.من الأفضل استخدام صورك الخاصة للحالة المحددة/غير المحددة أعلى الارتباط التشعبي أو عنصر الصورة.هتافات.

Answer 2

بدلاً من استخدام بعض عناصر التحكم غير القياسية، ما يجب عليك فعله هو استخدام جافا سكريبت غير المزعجة للقيام بذلك بعد حدوثه.يرى http://code.google.com/p/jquery-checkbox/ على سبيل المثال.

يؤدي استخدام مربع اختيار ASP القياسي إلى تبسيط عملية كتابة التعليمات البرمجية.لا يلزمك كتابة عنصر تحكم المستخدم الخاص بك، ولا يلزم تحديث جميع التعليمات البرمجية/الصفحات الموجودة لديك.

والأهم من ذلك، أنه عنصر تحكم HTML قياسي يمكن لجميع المتصفحات التعرف عليه.إنه متاح لجميع المستخدمين، ويعمل إذا لم يكن لديهم جافا سكريبت.على سبيل المثال، سيتمكن قارئو الشاشة للمكفوفين من فهمه كعنصر تحكم في خانة الاختيار، وليس مجرد صورة بها رابط.

Answer 3

أبسط وأفضل طريقة، وذلك باستخدام عنصر التحكم في خانة اختيار ASP مع تصميم مخصص.

 chkOrder.InputAttributes["class"] = "fancyCssClass";

يمكنك استخدام شيء من هذا القبيل ..امل ان يساعد

Answer 4

لماذا لا تستخدم زر Asp.net CheckBox مع ToggleButtonExtender المتوفر من مجموعة أدوات التحكم Ajax.

Answer 5

لا يعمل أي مما سبق بشكل جيد عند استخدام ASP.NET Web Forms وBootstrap.

انتهى بي الأمر باستخدام بول شريف مربع اختيار Bootstrap البسيط لنماذج الويب

<style>
    .checkbox .btn, .checkbox-inline .btn {
    padding-left: 2em;
    min-width: 8em;
    }
    .checkbox label, .checkbox-inline label {
    text-align: left;
    padding-left: 0.5em;
    }
    .checkbox input[type="checkbox"]{
        float:none;
    }
</style>


<div class="form-group">
    <div class="checkbox">
        <label class="btn btn-default">
            <asp:CheckBox ID="chk1" runat="server" Text="Required" />
        </label>
    </div>
</div>

والنتيجة تبدو هكذا...

Answer 6

لست متأكدًا من أنه سؤال متعلق بـ asp.net حقًا..جرب هذه، هناك الكثير من المعلومات الجيدة هنا:

http://www.456bereastreet.com/archive/200409/styling_form_controls/

Answer 7

ضع في اعتبارك أن asp:صندوق اختيار يقوم التحكم في الواقع بإخراج أكثر من مجرد إدخال مربع اختيار واحد.

على سبيل المثال، مخرجات التعليمات البرمجية الخاصة بي

<span class="CheckBoxStyle">
    <input id="ctl00_cphContent_cbCheckBox" 
           name="ctl00$cphContent$cbCheckBox"
           type="checkbox">
</span>

أين CheckBoxStyle هي قيمة سمة CssClass المطبقة على عنصر التحكم و cbCheckBox هو معرف عنصر التحكم.

لتحديد نمط الإدخال، تحتاج إلى كتابة CSS للهدف

span.CheckBox input {
  /* Styles here */
}

Answer 8

الصق هذا الرمز في ملف CSS الخاص بك وسيتيح لك تخصيص نمط مربع الاختيار الخاص بك.ومع ذلك، فهو ليس الحل الأفضل، فهو يعرض إلى حد كبير نمطك أعلى مربع الاختيار/زر الاختيار الموجود.

   input[type='checkbox']:after 
{

        width: 9px;
        height: 9px;
        border-radius: 9px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #3B8054;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 3px solid #3B8054;
        transition: 0.5s ease;
        cursor: pointer;

}

input[type='checkbox']:checked:after 
    {
        background-color: #9DFF00;
    }

Answer 9

إنهم يعتمدون على المتصفح حقًا.

ربما يمكنك أن تفعل شيئًا مشابهًا للإجابة في هذا سؤال حول تغيير زر تصفح الملف.