Acento circunflexo de entrada de texto de estilo

118

Eu quero estilizar o cursor de um focado <input type='text'/>. Especificamente, a cor e a espessura.

Randomblue
fonte
1
Bem, <input type="text"/>acho que isso é
Benjamin Crouzier
Ele está procurando estilizar o circunflexo, a pergunta editada e as tags
Benjamin Udink ten Cate
Considere alterar a resposta aceita. Dadas as últimas alterações de CSS, a resposta atualizada de Michael Jasper é de longe superior: stackoverflow.com/a/7339406/1889273
Boaz

Respostas:

74

Se você estiver usando um navegador de webkit, poderá alterar a cor do cursor seguindo o próximo snippet CSS. Não tenho certeza se é possível alterar o formato com CSS.

input,
textarea {
    font-size: 24px;
    padding: 10px;
    
    color: red;
    text-shadow: 0px 0px 0px #000;
    -webkit-text-fill-color: transparent;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color:
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

Aqui está um exemplo: http://jsfiddle.net/8k1k0awb/

Nestor Britez
fonte
3
Um hack inteligente, mas emoji não funciona porque eles são preenchidos pela sombra 😭
simbolo
Hmm, sombras não são necessárias para o efeito no meu caso (desktop Chrome e FF) - apenas edite a cor de preenchimento do texto e a entrada.
Velda de
86

'Caret' é a palavra que você está procurando. Eu acredito, porém, que faz parte do design do navegador, e não está ao alcance do CSS.

No entanto, aqui está um artigo interessante sobre a simulação de uma mudança de cursor usando Javascript e CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 Parece um pouco hacky para mim, mas provavelmente a única maneira de realizar a tarefa. O ponto principal do artigo é:

Teremos uma área de texto simples em algum lugar da tela, fora da visualização do visualizador e quando o usuário clicar em nosso "terminal falso", focaremos na área de texto e quando o usuário começar a digitar, simplesmente anexaremos os dados digitados na área de texto ao nosso "terminal" e pronto.

AQUI está uma demonstração em ação


Atualização de 2018

Há uma nova propriedade csscaret-color que se aplica ao cursor de uma área inputou contenteditable. O suporte está crescendo, mas não 100%, e isso afeta apenas a cor, não a largura ou outros tipos de aparência.

input{
  caret-color: rgb(0, 200, 0);
}
<input type="text"/>

Michael Jasper
fonte
38

No CSS3, agora existe uma forma nativa de fazer isso, sem nenhum dos hacks sugeridos nas respostas existentes: a caret-colorpropriedade .

Há várias coisas que você pode fazer com o cursor, conforme mostrado abaixo. Pode até ser animado .

/* Keyword value */
caret-color: auto;
color: transparent;
color: currentColor;

/* <color> values */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

A caret-colorpropriedade é compatível com Firefox 55 e Chrome 60. O suporte também está disponível no Safari Technical Preview e no Opera (mas ainda não no Edge). Você pode ver as tabelas de suporte atuais aqui .

Sacha Nacar
fonte
1
Vença-me com o soco. Claro, essa propriedade só funcionará no Firefox, pelo menos por enquanto, e não será lançada até abril de 2017. Consulte esta página.
SpyderScript
6

Aqui estão alguns fornecedores que você pode estar procurando

::-webkit-input-placeholder {color: tomato}
::-moz-placeholder          {color: tomato;} /* Firefox 19+ */
:-moz-placeholder           {color: tomato;} /* Firefox 18- */
:-ms-input-placeholder      {color: tomato;}

Você também pode definir o estilo de diferentes estados, como foco

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

Você também pode fazer certas transições nele, como

::-VENDOR-input-placeholder       {text-indent: 0px;   transition: text-indent 0.3s ease;}
:focus::-VENDOR-input-placeholder  {text-indent: 500px; transition: text-indent 0.3s ease;}
Sergey Khmelevskoy
fonte
5
Isso é útil para estilizar o texto do placholder, no entanto, não estiliza o acento circunflexo piscante do OP referenciado.
craignewkirk
4

É suficiente usar a propriedade color juntamente com -webkit-text-fill-color desta forma:

    input {
        color: red; /* color of caret */
        -webkit-text-fill-color: black; /* color of text */
    }
<input type="text"/>

Funciona em navegadores WebKit (mas não no iOS Safari, onde ainda é usada a cor do sistema para acento circunflexo) e também no Firefox.

A propriedade CSS -webkit-text-fill-color especifica a cor de preenchimento dos caracteres do texto . Se esta propriedade não for definida, o valor da propriedade color é usado. MDN

Portanto, isso significa que definimos a cor do texto com a cor de preenchimento do texto e a cor do cursor com a propriedade de cor padrão. Em um navegador não compatível, o acento circunflexo e o texto terão a mesma cor - cor do acento circunflexo.

Velda
fonte