Ik wil graag veranderen de CSS voor gehandicapten vakjes in een raster (ze zijn te moeilijk te zien van de gebruikers). Wat is een eenvoudige manier om dit te doen?
Mijn voorkeur in technologieën die worden gebruikt (in dalende volgorde):
CSS
JavaScript
jQuery
Andere
Ive had veel succes met een paar JS bibliotheken om het werk te doen. Toegegeven mijn vereiste was om de dozen te kijken heel anders dan de standaard in. De volgende bibliotheek is zelfs 508 compliant.
in principe, moet u onclick event bevestigen op div, p, of enig ander element gebruikt voor een net en breng de geselecteerde waarde in verborgen element in dat vakgebied in een raster. die zeer triviaal als JavaScript wordt gebruikt - controleer jQuery onclick evenement ook op elk element. Als aangeklikt, instelwaarde = 1 verborgen element.
Ik stel voor het veranderen van de kleur van de achtergrond (de background-colorvan het formulier / fieldset), en kijk of je kunt komen met een beter contrast. (? Niet-selecteerbaar) Als je gewoon wilt om de kleur van een handicap te veranderen vakjes die je kunt proberen:
input[disabled] {
...
/* CSS here */
...
}
Maar als ze zijn uitgeschakeld voor een reden dan ook, zeker ze hoeven niet prominent zichtbaar te zijn? Het doel van hun zijn grijs-out is, zeker, om verwarring tussen actieve / ingeschakeld en inactief / uitgeschakelde elementen te vermijden?
input:disabled {}werkt voor alle browsers, behalve-je-IE geraden. Voor IE, ik denk dat je zult moeten een aantal JS bibliotheek te gebruiken.
Houd het selectievakje ingeschakeld, maar voeg dan onfocus=this.blur()het selectievakje zodat het niet kan worden geklikt.
Of als het gebruiken van ASP.net (zoals je zegt in je reactie) houden het ingesteld op ingeschakeld checkbox en voeg het volgende toe aan de Page.Load evenement:
CheckBox1.Attributes.Add("onclick", "return false;");
Als u een formulier met een mix van in- en uitgeschakeld vakjes, met een handicap vakjes vervaagde voorkomt verwarring bij de gebruiker. Als het de bedoeling is om een alleen-pagina met selectievakjes weer te geven dan het vervangen van checkbox ingang elementen met afbeeldingen (bijv. Naar het product opties geselecteerd op een aankoopbewijs tonen) kunnen betere resultaten maken.
Vervangen
<input type="checkbox" disabled>
<input type="checkbox" disabled checked>
met
<img src="unchecked.gif">
<img src="checked.gif">
Eigenlijk met een beetje CSS3 kunt u mock-up van een zeer simplistische oplossing. U zult altijd moeten overwegen wat voor soort ondersteuning die u wilt aanbieden. Maar als je goed met haar te werken op moderne browsers zijn, geef het een gaan.
Hier is de HTML
<label>
<input type="checkbox" name="test" />
<span>I accept terms and cons</span><br><br>
<button>Great!</button>
</label>
Hier is de CSS
button { display: none}
:checked ~ button {
font-style: italic;
color: green;
display: inherit;
}
En hier is de DEMO http://jsfiddle.net/DyjmM/