html - tipos - Estilo de introducción de texto

todo sobre html

Question

Quiero diseñar el cursor de un <input type=''text''/> enfocado. Específicamente, el color y el grosor.

Answer 1

''Caret'' es la palabra que estás buscando. Aunque creo que es parte del diseño de los navegadores y no está al alcance de CSS.

Sin embargo, aquí hay un escrito interesante sobre la simulación de un cambio de cursor utilizando Javascript y CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 Me parece un poco raro, pero probablemente la única forma de lograr la tarea. El punto principal del artículo es:

Tendremos un área de texto simple en algún lugar de la pantalla fuera de la vista del espectador y cuando el usuario haga clic en nuestro "terminal falso" nos enfocaremos en el área de texto y cuando el usuario empiece a escribir simplemente agregaremos los datos escritos en el área de texto a nuestra "terminal" y eso es todo.

HERE hay una demostración en acción

Actualización 2018

Hay un nuevo caret-color propiedad css que se aplica al cursor de una input o área contenteditable . El soporte está creciendo, pero no al 100%, y esto solo afecta el color, el ancho y otros tipos de apariencia.

input{
  caret-color: rgb(0, 200, 0);
}

<input type="text"/>

Answer 2

Aquí hay algunos proveedores que quizás yo busque

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

También puede diseñar diferentes estados, como el enfoque

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

También puede hacer ciertas transiciones en él, 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;}

Answer 3

Basta con usar la propiedad de color junto con -webkit-text-fill-colour de esta manera:

    input {
        color: red; /* color of caret */
        -webkit-text-fill-color: black; /* color of text */
    }

<input type="text"/>

Funciona en navegadores WebKit (pero no en iOS Safari, donde todavía se usa el color del sistema para caret) y también en Firefox.

La propiedad CSS -webkit-text-fill-colour especifica el color de relleno de los caracteres del texto . Si esta propiedad no está establecida, se usa el valor de la propiedad de color. MDN

Esto significa que configuramos el color del texto con el color de relleno de texto y el color de intercalación con la propiedad de color estándar. En el navegador no compatible, el cursor y el texto tendrán el mismo color: el color del cursor.

Answer 4

En CSS3, ahora existe una forma nativa de hacerlo, sin ninguno de los hacks sugeridos en las respuestas existentes: la propiedad de caret-color .

Hay muchas cosas que puede hacer con el caret, como se ve a continuación. Incluso puede 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);

La propiedad de caret-color es compatible con Firefox 55 y Chrome 60. El soporte también está disponible en Safari Technical Preview y en Opera (pero aún no en Edge). Puede ver las tablas de soporte actuales here .

Answer 5

Si está utilizando un navegador webkit, puede cambiar el color del símbolo de intercalación siguiendo el siguiente fragmento de CSS. No estoy seguro de si es posible cambiar el formato con 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: #ccc;
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

Aquí hay un ejemplo: http://jsfiddle.net/8k1k0awb/