Eu quero estilizar o cursor de um focado <input type='text'/>
. Especificamente, a cor e a espessura.
Eu quero estilizar o cursor de um focado <input type='text'/>
. Especificamente, a cor e a espessura.
Respostas:
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/
'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
Há uma nova propriedade csscaret-color
que se aplica ao cursor de uma área input
ou 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.
No CSS3, agora existe uma forma nativa de fazer isso, sem nenhum dos hacks sugeridos nas respostas existentes: a caret-color
propriedade .
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-color
propriedade é 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 .
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;}
É 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.
<input type="text"/>
acho que isso é