Como definir CSS para caixas com deficiência?

StackOverflow https://stackoverflow.com/questions/1206960

  •  05-07-2019
  •  | 
  •  

Pergunta

Eu gostaria mudança do CSS para caixas com deficiência em uma grade (eles são muito difíceis de ver para os utilizadores). O que é uma maneira simples de fazer isso?

A minha preferência nas tecnologias usadas (em ordem decrescente):
CSS
JavaScript
jQuery
Outros

Foi útil?

Solução

Eu sugiro mudar a cor do fundo (o background-color da forma / fieldset), e veja se você pode vir até com um melhor contraste. (? Non-selecionável) Se você só quer mudar a cor das pessoas com deficiência caixas de seleção que você pode tentar: 

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

Mas se eles estão desativados por uma razão, certamente eles não precisam ser proeminente visível? O objetivo de seu ser cinzento-out é, certamente, para evitar confusão entre / ativo habilitado e elementos / form desabilitado inativo?

Outras dicas

Mantenha a caixa de seleção habilitado, mas em seguida, adicione onfocus=this.blur() para a caixa de seleção para que ele não pode ser clicado.

Ou se utilizando ASP.net (como você diz em seu comentário) manter o conjunto de caixa de seleção para habilitado e adicione o seguinte ao evento Page.Load: 

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

Ive tive sorte com algumas bibliotecas JS para fazer o trabalho. Concedida a minha obrigação era fazer com que as caixas parecem muito diferentes da caixa de seleção padrão. O seguinte biblioteca é ainda 508 compatível.

Styled controles de formulário

input:disabled {} funciona para cada navegador, exceto-você adivinhou-IE. Para o IE, eu acho que você vai ter que usar alguma biblioteca JS.

Basicamente, você precisa anexar onclick evento no div, p, ou qualquer outro elemento usado para uma grade e, em seguida, transferir o valor verificado no elemento escondido associado a esse campo em uma grade. que é muito trivial, se o javascript é usado - verificação jquery para adicionar evento onclick em qualquer elemento. se clicado, conjunto de valor = 1 para o elemento escondido.

Na verdade, com um pouco CSS3 você pode zombar-se uma solução muito simplista. Você sempre tem que considerar que tipo de apoio que você deseja oferecer. Mas se você está bem com ele trabalhando em navegadores modernos, apenas dar-lhe um ir.

Aqui está o HTML 

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

Aqui está o CSS 

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

E aqui está a DEMONSTRA http://jsfiddle.net/DyjmM/

Se você tem um formulário com um mix de caixas de seleção ativados e desativados, tendo as caixas com deficiência desapareceu evita a confusão para o usuário. Se a intenção é exibir uma página só de visualização com caixas (ex. Para mostrar as opções de produtos selecionados em um recibo de compra), em seguida, substituindo os elementos de entrada caixa com imagens podem tornar melhores resultados.

Substitua 

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

com 

<img src="unchecked.gif">
<img src="checked.gif">
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top