Mudar o estilo / Look of Asp: CheckBox usando CSS

Question

Eu quero mudar o visual padrão "3D" da caixa de seleção asp.net padrão para dizer 1px solid. Se eu tentar aplicar o estilo para o Border por exemplo, ele faz exatamente isso - chama a caixa de seleção padrão com uma borda em torno dele -. Que é Acho válida

De qualquer forma, há uma maneira de mudar a forma como a caixa de texto real é estilo?

Answer 1

Eu acho que a melhor maneira de fazer CheckBox parece realmente diferente não é para o controle caixa serve para nada. Melhor usar suas próprias imagens para verificada estado / desmarcada no topo da hiperligação ou elemento de imagem. Felicidades.

Answer 2

Ao invés de usar algum controle não-padrão, o que você deve fazer é usar javascript un-intrusiva de fazê-lo após o fato. Consulte http://code.google.com/p/jquery-checkbox/ Por exemplo.

Usando o padrão simplifica checkbox ASP escrever o código. Você não tem que escrever o seu próprio controle de usuário, e todo o seu código / páginas existentes não tem que ser atualizado.

Mais importante, ele é um controle HTML padrão que todos os navegadores podem reconhecer. É acessível a todos os utilizadores, eo trabalho se eles não têm javascript. Por exemplo, leitores de tela para cegos será capaz de compreendê-lo como um controle de caixa de seleção, e não apenas uma imagem com um link.

Answer 3

mais simples melhor maneira, usando o controle de caixa de seleção ASP com design personalizado.

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

Você pode usar algo como isso .. espero que ajude

Answer 4

Por que não usar Asp.net botão CheckBox com ToggleButtonExtender disponível a partir do kit de ferramentas de controle Ajax.

Answer 5

Nenhum dos trabalhos acima bem ao usar formulários ASP.NET Web e Bootstrap.

Acabei usando Simple Paul Sheriff Bootstrap CheckBox para web Forms

<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>

Os olhares resultado como este ...

Answer 6

Não tenho certeza que ele é realmente uma questão relacionada com asp.net .. Dar a este um tiro, os lotes de boa informação aqui:

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

Answer 7

Tenha em mente que o asp:. CheckBox controle realmente saídas mais do que apenas uma entrada de caixa único

Por exemplo, minhas saídas de código

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

onde CheckBoxStyle é o valor do atributo CssClass aplicada ao controle e cbCheckBox é o ID do controle.

Para estilo de entrada, você precisa escrever CSS para destino

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

Answer 8

colar este código em seu css e vai permitir que você personalize o seu estilo caixa de seleção. no entanto, não é a melhor solução, é praticamente exibindo seu estilo no topo do existente caixa / radiobutton.

   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

Eles são dependentes do navegador realmente.

Talvez você poderia fazer algo semelhante para a resposta em esta questão sobre como alterar o botão de navegação de arquivos.