Como alterar o estilo da borda da caixa de seleção em CSS?

122

Como posso alterar o estilo da borda da caixa de seleção (entrada)? Eu coloquei border:1px solid #1e5180isso, mas no FireFox 3.5, nada acontece!

html  css 
— Ricky
fonte

Respostas:

63

Se algo acontecer em qualquer navegador, eu ficaria surpreso. Esse é um desses elementos de formulário pendentes que os navegadores tendem a não deixar você estilizar tanto, e que as pessoas geralmente tentam substituir por javascript para que possam estilizar / codificar algo para parecer e agir como uma caixa de seleção.

— Sofia
fonte
4
O Opera lida com o estilo muito bem na caixa de seleção. O IE tem alguns estilos que envolvem a caixa de seleção (não na própria caixa de seleção).
— temor
4
Hoje em dia eles são feios: D
— Gergely Fehérvári
1
ainda são feios em 2020
— Paul
210

Eu sugiro usar "estrutura de tópicos" em vez de "borda". Por exemplo: outline: 1px solid #1e5180.

— Greg
fonte
3
O esboço é uma ótima alternativa.
— Nippysaurus
4
O esboço é muito bom e funciona para todas as caixas de entrada e seleção, tornando-o útil para as classes ".error".
— SztupY
2
Pode ser necessário adicionar !importantao seu css ao usar o contorno. Eu estava testando isso no Firefox 12.0 e, sem! Importante, o esquema desapareceria enquanto eu estivesse clicando na caixa de seleção.
— Weezle
3
Essa é uma ótima alternativa, mas o problema do esquema é que, no IE7, ele não funciona!
— Yises
13
@ Yises Você precisa se preocupar com o IE7? Caramba, me desculpe.
— theblang
71

Você deveria usar

-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;

Então você se livra da imagem / estilo padrão da caixa de seleção e pode estilizá-la. De qualquer forma, uma fronteira ainda estará lá no Firefox

— Valerij
fonte
2
O Opera permite estilizar caixas de seleção sem qualquer invasão extra - eu deixaria de lado o estilo -o-aparecimento. -moz-aparecimento e -webkit-aparecimento são ótimos, no entanto.
— Neall 6/10/10
7
Ops - falou muito cedo: "-webkit-aparecimento: nenhum;" parece desativar o comportamento da caixa de seleção.
— Neall 6/10/10
6
para mim (cromo 5) isso não acontecer, você precisa o estilo: Extra estado selecionado
— Valerij
1
a aparência nunca fez parte do padrão CSS. Não use isso.
— precisa
uau, isso é incrível, eu vou me livrar dos plugins. eu posso fazer qualquer coisa => | entrada [tipo = caixa de seleção] | input [type = checkbox]: passe o mouse | input [type = checkbox]: marcado | input [type = checkbox]: marcado: após ...
— h0mayun 31/08
21

Você pode usar sombras de caixa para falsificar uma borda:

-webkit-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
-moz-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
— Dennis Heiden
fonte
@retrovertigo qual versão?
— Dennis Heiden
Versão 12.0.2 (14606.3.4) / mais recente no macOS 10.14
— retrovertigo
@retrovertigo Testei minha solução e você está certo. Minha resposta não funciona no Safari sem outras modificações (como -webkit-aparecimento: nenhum;). Três anos depois, eu usaria as soluções fornecidas por pendingfox ou Adan. Mas tentarei estender minha resposta dentro de algumas semanas. Obrigado pelo seu feedback.
— Dennis Heiden
11

Aqui está uma solução CSS simples (sem imagens) para vários navegadores, baseada nas caixas de seleção e botões de opção personalizados da Martin com o CSS3 LINK: http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons -with-css3-revisited /

Aqui está um jsFiddle: http://jsfiddle.net/DJRavine/od26wL6n/

Eu testei isso nos seguintes navegadores:

  • FireFox (41.0.2) (42)
  • Google Chrome (46.0.2490.80 m)
  • Opera (33.0.1990.43)
  • Internet Explorer (11.0.10240.16431 [versões de atualização: 11.0.22])
  • Microsoft Edge (20.10240.16384.0)
  • Safari para iPhone iOS9 (601.1.46)

label,
input[type="radio"] + span,
input[type="radio"] + span::before,
label,
input[type="checkbox"] + span,
input[type="checkbox"] + span::before
{
    display: inline-block;
    vertical-align: middle;
}
 
label *,
label *
{
    cursor: pointer;
}
 
input[type="radio"],
input[type="checkbox"]
{
    opacity: 0;
    position: absolute;
}
 
input[type="radio"] + span,
input[type="checkbox"] + span
{
    font: normal 11px/14px Arial, Sans-serif;
    color: #333;
}
 
label:hover span::before,
label:hover span::before
{
    -moz-box-shadow: 0 0 2px #ccc;
    -webkit-box-shadow: 0 0 2px #ccc;
    box-shadow: 0 0 2px #ccc;
}
 
label:hover span,
label:hover span
{
    color: #000;
}
 
input[type="radio"] + span::before,
input[type="checkbox"] + span::before
{
    content: "";
    width: 12px;
    height: 12px;
    margin: 0 4px 0 0;
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: center;
     
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
     
    background: #f6f6f6;
    background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
    background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
    background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
    background: -o-radial-gradient(#f6f6f6, #dfdfdf);
    background: radial-gradient(#f6f6f6, #dfdfdf);
}
 
input[type="radio"]:checked + span::before,
input[type="checkbox"]:checked + span::before
{
    color: #666;
}
 
input[type="radio"]:disabled + span,
input[type="checkbox"]:disabled + span
{
    cursor: default;
     
    -moz-opacity: .4;
    -webkit-opacity: .4;
    opacity: .4;
}
 
input[type="checkbox"] + span::before
{
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
 
input[type="radio"]:checked + span::before
{
    content: "\2022";
    font-size: 30px;
    margin-top: -1px;
}
 
input[type="checkbox"]:checked + span::before
{
    content: "\2714";
    font-size: 12px;
}



input[class="blue"] + span::before
{
    border: solid 1px blue;
    background: #B2DBFF;
    background: -moz-radial-gradient(#B2DBFF, #dfdfdf);
    background: -webkit-radial-gradient(#B2DBFF, #dfdfdf);
    background: -ms-radial-gradient(#B2DBFF, #dfdfdf);
    background: -o-radial-gradient(#B2DBFF, #dfdfdf);
    background: radial-gradient(#B2DBFF, #dfdfdf);
}
input[class="blue"]:checked + span::before
{
    color: darkblue;
}



input[class="red"] + span::before
{
    border: solid 1px red;
    background: #FF9593;
    background: -moz-radial-gradient(#FF9593, #dfdfdf);
    background: -webkit-radial-gradient(#FF9593, #dfdfdf);
    background: -ms-radial-gradient(#FF9593, #dfdfdf);
    background: -o-radial-gradient(#FF9593, #dfdfdf);
    background: radial-gradient(#FF9593, #dfdfdf);
}
input[class="red"]:checked + span::before
{
    color: darkred;
}
 <label><input type="radio" checked="checked" name="radios-01" /><span>checked radio button</span></label>
 <label><input type="radio" name="radios-01" /><span>unchecked radio button</span></label>
 <label><input type="radio" name="radios-01" disabled="disabled" /><span>disabled radio button</span></label>

<br/>

 <label><input type="radio" checked="checked" name="radios-02"  class="blue" /><span>checked radio button</span></label>
 <label><input type="radio" name="radios-02" class="blue" /><span>unchecked radio button</span></label>
 <label><input type="radio" name="radios-02" disabled="disabled" class="blue" /><span>disabled radio button</span></label>

<br/>

 <label><input type="radio" checked="checked" name="radios-03"  class="red" /><span>checked radio button</span></label>
 <label><input type="radio" name="radios-03" class="red" /><span>unchecked radio button</span></label>
 <label><input type="radio" name="radios-03" disabled="disabled" class="red" /><span>disabled radio button</span></label>

<br/>
 
<label><input type="checkbox" checked="checked" name="checkbox-01" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" /><span>disabled checkbox</span></label>

<br/>
 
<label><input type="checkbox" checked="checked" name="checkbox-01" class="blue" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" class="blue" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="blue" /><span>disabled checkbox</span></label>

<br/>
 
<label><input type="checkbox" checked="checked" name="checkbox-01" class="red" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" class="red" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="red" /><span>disabled checkbox</span></label>
Expandir snippet

— Adan Rehtla
fonte
10

Estou desatualizado, eu sei .. Mas uma solução alternativa seria colocar sua caixa de seleção dentro de uma etiqueta de rótulo e, em seguida, estilizar o rótulo com uma borda:

<label class='hasborder'><input type='checkbox' /></label>

estilize o rótulo:

.hasborder { border:1px solid #F00; }
— Hussam
fonte
1
Lembre-se também de que o elemento label marcará a caixa de seleção sempre que for clicado, mesmo se a caixa de seleção não estiver visível dentro dela. Então, na etiqueta que você pode fazer algo parecido label { position: relative; overflow: hidden; width: 16px; height: 16px; border: 1px solid #0f0; }e depois label > input[type=checkbox] { position: absolute; left: -999px; }Isso permitirá que você costume estilo seu próprio caixa e a caixa original ainda vai ficar marcada / desmarcada mas o usuário não vai vê-lo. Eles verão apenas sua caixa de seleção personalizada.
— Gavin
1
Esqueceu-se de adicionar e, em seguida, você pode usar seletores como :hovere :checkedestilizar outros estados da sua caixa de seleção personalizada.
— Gavin
10

Aqui está minha versão que usa FontAwesome para ticker de caixa de seleção, acho que FontAwesome é usado por quase todo mundo, por isso é seguro supor que você também o tenha. Não testado no IE / Edge e acho que ninguém se importa.

input[type=checkbox] {
	-moz-appearance:none;
	-webkit-appearance:none;
	-o-appearance:none;
	outline: none;
	content: none;	
}

input[type=checkbox]:before {
	font-family: "FontAwesome";
    content: "\f00c";
    font-size: 15px;
    color: transparent !important;
    background: #fef2e0;
    display: block;
    width: 15px;
    height: 15px;
    border: 1px solid black;
    margin-right: 7px;
}

input[type=checkbox]:checked:before {

	color: black !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<input type="checkbox">
Expandir snippet

— pendingfox
fonte
9

Para Firefox , Chrome e Safari , nada acontece.

Para o IE a borda é aplicada fora da caixa de seleção (não como parte da caixa de seleção) e o efeito de sombreamento "sofisticado" na caixa de seleção desaparece (exibido como uma caixa de seleção à moda antiga).

Para o Opera, o estilo da borda está realmente aplicando a borda no elemento da caixa de seleção.
O Opera também lida com outros estilos na caixa de seleção melhor do que em outros navegadores: a cor é aplicada como a cor do carrapato, a cor de fundo é aplicada como a cor de fundo dentro da caixa de seleção (o IE aplica o fundo como se a caixa de seleção estivesse dentro de um<div> com fundo)) .

Conclusão

A solução mais fácil é embrulhar a caixa de seleção <div>como sugerem outros.
Se você deseja controlar completamente a aparência, precisará seguir a abordagem avançada de imagem / javascript, também utilizada por outras pessoas.

— temor
fonte
2
+1 para pesquisa, mas agrupá-lo em uma div não é uma solução. Ele não permite que você estilizar a caixa de seleção, ele permite que você estilo em torno da caixa de seleção, a menos que você começar a jogar com a tentativa de escondê-lo e pintá-la, que terá seus próprios problemas.
Bem, o único navegador que permite estilizar a caixa de seleção em si é o Opera. Envolvê-lo em uma div é uma solução que pode ser boa o suficiente, mas isso realmente depende do que você deseja. O IE realmente age como se você o colocasse em uma div se tentar estilizar a caixa de seleção!
— temor
7

Caixas de seleção de estilo (e muitos outros elementos de entrada para essa matéria) não são realmente possíveis com CSS puro, se você quiser alterar drasticamente a aparência visual.

Sua melhor aposta é implementar algo como jqTransform , que na verdade substitui as entradas por imagens e aplica o comportamento javascript para simular uma caixa de seleção (ou outro elemento)

— ChrisR
fonte
4

Não, você ainda não pode estilizar a caixa de seleção em si, mas (finalmente) descobri como estilizar uma ilusão, mantendo a funcionalidade de clicar em uma caixa de seleção. Isso significa que você pode alterná-lo, mesmo que o cursor não esteja perfeitamente imóvel, sem correr o risco de selecionar o texto ou acionar o recurso de arrastar e soltar!

O exemplo está usando um "botão" de extensão, além de algum texto em um rótulo, mas fornece a idéia de como você pode tornar a caixa de seleção invisível e desenhar qualquer coisa por trás dela.

Essa solução provavelmente também se encaixa em botões de opção.

O seguinte funciona no IE9, FF30.0 e Chrome 40.0.2214.91 e é apenas um exemplo básico. Você ainda pode usá-lo em combinação com imagens de fundo e pseudoelementos.

http://jsfiddle.net/o0xo13yL/1/

label {
    display: inline-block;
    position: relative; /* needed for checkbox absolute positioning */
    background-color: #eee;
    padding: .5rem;
    border: 1px solid #000;
    border-radius: .375rem;
    font-family: "Courier New";
    font-size: 1rem;
    line-height: 1rem;
}

label > input[type="checkbox"] {
    display: block;
    position: absolute; /* remove it from the flow */
    width: 100%;
    height: 100%;
    margin: -.5rem; /* negative the padding of label to cover the "button" */
    cursor: pointer;
    opacity: 0; /* make it transparent */
    z-index: 666; /* place it on top of everything else */
}

label > input[type="checkbox"] + span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #000;
    margin-right: .5rem;
}

label > input[type="checkbox"]:checked + span {
    background-color: #666;
}

<label>
    <input type="checkbox" />
    <span>&nbsp;</span>Label text
</label>
— LGT
fonte
2

Aqui está uma maneira simples (usar antes ou depois dos pseudo elementos / classes):

input[type=checkbox] {
    position: relative;
}

input[type=checkbox]:after {
    position: absolute;
    top: 0;
    left: 0;
    /* Above three lines allow the checkbox:after position at checkbox's position */
    content: '';
    width: 32px;
    height: 32px;
    z-index: 1; /* This allows the after overlap the checkbox */
    /* Anything you want */
}
— Alex Fang
fonte
Eu acho que essa é uma maneira inteligente de mudar o estilo da sua caixa de seleção e algo assim.
— Alex fang
1
Não está funcionando no Firefox e IE. Mais importante, é uma implementação incorreta do Chrome, porque NÃO é permitido que elementos nulos tenham qualquer conteúdo.
— Leo
Leo, você está interpretando mal o termo "conteúdo", tudo o que diz é que esses elementos nulos não podem ter conteúdo entre eles porque não há uma tag de fechamento. por exemplo, <a> content </a> possui uma tag de fechamento para que possa haver um conteúdo entre essas tags. mas a entrada não possui a tag de fechamento, portanto não pode ter o conteúdo por princípio. Por outro lado, os pseudoelementos têm uma propriedade chamada "conteúdo", que pode ser usada em qualquer lugar.
— Pendingfox # 6/18
-1 

<!DOCTYPE html>
<html>
<head>
<style> 

.abc123
{
	-webkit-appearance:none;
    width: 14px;
    height: 14px;
    display: inline-block;
    background: #FFFFFF;
	border: 1px solid rgba(220,220,225,1);
}
.abc123:after {
  content: "";
  display: inline-block;
  position: relative;
  top: -3px;
  left: 4px;
  width: 3px;
  height: 5px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
}

input[type=checkbox]:checked   {
    background: #327DFF;
    outline: none;
    border: 1px solid rgba(50,125,255,1);
}
input:focus,input:active {
	outline: none;
}

input:hover {
   border: 1px solid rgba(50,125,255,1);
}

</style>
</head>
<body>

<input class="abc123" type="checkbox"></input>


</body>
</html>
Expandir snippet

— KeepLearn
fonte
Primeiro: ": depois" crie √; Segundo: "-webkit-aparecimento: nenhum" deixou o estilo de origem não funcionar, e então você pode definir seu estilo.
— KeepLearn 20/08/19
2
Por favor, escreva uma breve descrição sobre sua resposta.
— Anjo F Syrus
-5

coloque-o em uma div e adicione borda à div

— Midhat
fonte
5
Então você terá uma borda dupla.
— Egor Pavlikhin 17/03/10
<div style = "border-style: solid; width: 120px;"> <input type = "checkbox" name = "mycheck"> Minha caixa de seleção </input> </div> funciona bem com htmlsandbox
— Midhat
8
Definir 'funciona bem'. Por exemplo, nunca vi uma caixa de seleção com 120 pixels de largura.
-8 
<div style="border-style: solid;width:13px"> 
   <input type="checkbox" name="mycheck" style="margin:0;padding:0;">
   </input> 
</div>
— Midhat
fonte
7
@lexu Não existe tal coisa como </input>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.