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

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>

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

Respostas:

Conclusão