كيفية تعيين CSS لمربعات المعوقين؟

Question

وأود تغيير CSS لمربعات المعوقين في شبكة (هم من الصعب جدا أن نرى للمستخدمين). ما هو وسيلة بسيطة للقيام بذلك؟

وأفضله في التقنيات المستخدمة (في ترتيب تنازلي):
CSS
جافا سكريبت
مسج
البعض

Answer 1

وأنا أقترح تغيير لون الخلفية (background-color النموذج / مجموعة حقول)، ومعرفة ما إذا كان يمكنك الخروج مع تباين أفضل. (؟ غير قابل للتحديد) إذا كنت ترغب فقط في تغيير لون تعطيل خانات يمكنك أن تجرب:

input[disabled] {
...
/* CSS here */
...
}

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

Answer 2

والحفاظ على صندوق الاختيار تمكين، ولكن بعد إضافة onfocus=this.blur() مربع الاختيار لذلك لا يمكن النقر.

وأو إذا باستخدام ASP.net (كما تقول في تعليقك) إبقاء مربع مجموعة لتمكين وإضافة ما يلي إلى الحدث Page.Load:

CheckBox1.Attributes.Add("onclick", "return false;");

Answer 3

كان

وإيف حظا سعيدا مع عدد قليل من المكتبات JS للقيام بهذا العمل. ومنح متطلباتي لجعل صناديق تبدو مختلفة جدا من خانة الاختيار القياسية. المكتبة التالية هي حتى 508 المتوافقة.

نموذج نصب عناصر

Answer 4

وinput:disabled {} يعمل لكل متصفح باستثناء-هل تفكر في ذلك-IE. لIE، أعتقد سيكون لديك لاستخدام بعض المكتبات JS.

Answer 5

وأساسا، تحتاج إلى إرفاق الحدث onClick على شعبة، ص، أو أي عنصر آخر يستخدم في أغراض شبكة ومن ثم تحويل قيمة دققت في العنصر الخفية المرتبطة بهذا المجال في الشبكة. وهو تافهة جدا، إذا تم استخدام جافا سكريبت - تحقق مسج لإضافة الحدث onClick على أي عنصر. إذا النقر عليها، القيمة = 1 تعيين العنصر الخفي.

Answer 6

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

وهنا يكمن HTML

<label>
    <input type="checkbox" name="test" />
    <span>I accept terms and cons</span><br><br>
    <button>Great!</button>
</label>

وهنا يكمن CSS

button { display: none}
:checked ~ button {
    font-style: italic;
    color: green;  
    display: inherit;
}

وهنا هو http://jsfiddle.net/DyjmM/

Answer 7

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

واستبدال

<input type="checkbox" disabled>
<input type="checkbox" disabled checked>

مع

<img src="unchecked.gif">
<img src="checked.gif">