Θα ήθελα να αλλάξετε το CSS για άτομα με ειδικές ανάγκες πλαίσια ελέγχου σε ένα πλέγμα (που είναι πάρα πολύ δύσκολο να δούμε για τους χρήστες). Τι είναι ένας απλός τρόπος για να γίνει αυτό;
Η προτίμησή μου σε τεχνολογίες που χρησιμοποιούνται (κατά φθίνουσα σειρά):
CSS
Javascript για
jQuery
Άλλα
Ive είχε καλή τύχη με μερικές βιβλιοθήκες JS για να κάνει τη δουλειά. Χορήγησε απαίτηση μου ήταν να κάνει τα κουτιά είναι πολύ διαφορετική από το πρότυπο πλαίσιο ελέγχου. Η παρακάτω συλλογή είναι ακόμα 508 συμβατό.
Βασικά, θα πρέπει να συνδέσετε onclick εκδήλωση στο div, σ, ή οποιοδήποτε άλλο στοιχείο που χρησιμοποιείται για ένα δίκτυο και, στη συνέχεια, μεταφέρετε την επιλεγμένη τιμή σε κρυφό στοιχείο που σχετίζεται με αυτό το πεδίο σε ένα πλέγμα. η οποία είναι πολύ ασήμαντο, αν χρησιμοποιείται javascript - ελέγξτε jQuery για να προσθέσετε onclick εκδήλωση για οποιοδήποτε στοιχείο. αν κάνετε κλικ, ορίστε την τιμή = 1 για τα κρυφά στοιχεία.
Θα πρότεινα την αλλαγή του χρώματος του φόντου (η background-colorτης μορφής / fieldset), και δείτε αν μπορείτε να καταλήξουμε σε μια καλύτερη αντίθεση. (? Μη επιλέξιμο) Αν απλά θέλετε να αλλάξετε το χρώμα των αναπήρων πλαίσια ελέγχου που μπορείτε να δοκιμάσετε:
input[disabled] {
...
/* CSS here */
...
}
Αλλά αν είναι απενεργοποιημένη για κάποιο λόγο, σίγουρα θα δεν χρειάζεται να είναι εμφανώς ορατή; Ο στόχος για την ύπαρξη γκρι χρώμα τους είναι, σίγουρα, για να αποφευχθεί η σύγχυση μεταξύ των ενεργών / ενεργοποιηθεί και ανενεργά / άτομα με ειδικές ανάγκες στοιχείων μορφή;
input:disabled {}λειτουργεί για κάθε πρόγραμμα περιήγησης εκτός του-μπορείτε να το-IE μαντέψατε. Για IE, υποθέτω ότι θα πρέπει να χρησιμοποιήσετε κάποια βιβλιοθήκη JS.
Κρατήστε ενεργοποιημένο το πλαίσιο ελέγχου, αλλά στη συνέχεια, προσθέστε onfocus=this.blur()στο κουτάκι ώστε να μην μπορεί να πατηθεί.
Ή αν χρησιμοποιείτε ASP.net (όπως λέτε στο σχόλιό σας) να κρατήσει το πλαίσιο ελέγχου που να ενεργοποιήσετε και να προσθέσετε τα ακόλουθα στο γεγονός Page.Load:
CheckBox1.Attributes.Add("onclick", "return false;");
Αν έχετε μια φόρμα με ένα μείγμα από ενεργοποιηθεί και να απενεργοποιηθεί πλαίσια ελέγχου, με τα πλαίσια ελέγχου με ειδικές ανάγκες έσβησε αποφεύγεται η σύγχυση για το χρήστη. Εάν η πρόθεση είναι να εμφανιστεί μια σελίδα μόνο για προβολή με πλαίσια ελέγχου (πχ. Για να δείξει τις επιλογές των προϊόντων που επιλέγονται με απόδειξη αγοράς), στη συνέχεια, αντικαθιστώντας τα στοιχεία εισόδου κουτάκι με τις εικόνες μπορεί να καταστήσει καλύτερα αποτελέσματα.
Αντικαθιστώ
<input type="checkbox" disabled>
<input type="checkbox" disabled checked>
με
<img src="unchecked.gif">
<img src="checked.gif">
Στην πραγματικότητα, με 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;
}
Και εδώ είναι το DEMO http://jsfiddle.net/DyjmM/