css3 - caret-color css

Cómo ajustar el tamaño de Caret(cursor parpadeante) dentro de la barra de búsqueda con css

Question

Intenté buscarlo en Google y, sorprendentemente, no encontré ningún resultado relacionado ... Me pregunto cómo puedo usar css para ajustar el cursor parpadeante dentro del cuadro de búsqueda con CSS. Ajusté el tamaño del cuadro de búsqueda, pero parece que el tamaño del cursor parpadeante sigue siendo el tamaño del texto pequeño original.

Answer 1

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

Sin embargo, aquí hay una reseña interesante sobre cómo simular un cambio de caret usando Javascript y CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 Me parece un poco difícil, pero probablemente sea la única forma de hacerlo. cumplir 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 concentraremos en el área de texto y cuando el usuario comience a escribir simplemente anexaremos los datos escritos en el área de texto. a nuestro "terminal" y eso es todo.

Here está la demo en acción.

1. Al igual que en la demostración, puede hacer el cuadro de búsqueda utilizando un div y copiar el texto de la entrada a él usando javascript y luego agregarle su caret (hecho con css).
2. Como saben, el tamaño de fuente también puede hacer cambios en el tamaño de la intercalación.

También puedes usar lo siguiente para cambiar el color del caret,

input{
  caret-color:red;
}

<input type="text">

Answer 2

Como sé, no hay forma directa de estilizar el caret. En su lugar, aquí hay algunas informaciones útiles que pueden ayudarte a abrirte camino a través de estos problemas.

De forma predeterminada, la altura del cursor tomará la altura de la fuente, la única vez que no lo hará, es cuando se especifica la altura de la línea y luego tomará esta altura.

Por lo tanto, si desea modificar la altura del cursor, puede hacerlo a través del tamaño de fuente o de la línea si no desea cambiar el tamaño de fuente.

Answer 3

La búsqueda de Caret en lugar de Cursor le dará más resultados.

Aparentemente, no es posible en un área de texto, pero es posible en otros elementos a través de Javascript:

Echa un vistazo a:

Cómo controlar el tamaño del cursor / cursor con CSS

Como modificar el caret con css.

y

Estilo de entrada de texto caret

Answer 4

No hay forma de estilizar el caret actualmente, pero si usa otro elemento DOM para mostrar el valor de control de entrada, puede hacerlo. Eche un vistazo a ¿Cómo usar este cursor cuadrado en un campo de entrada HTML?

Answer 5

No puede cambiar el ancho del cursor (al menos por ahora); Pero puede cambiar el color del caret para la mayoría de los navegadores modernos

https://developer.mozilla.org/en-US/docs/Web/CSS/caret-color

input {
 caret-color: red;
 caret-color: #ff0000;
 caret-color: rgb(255, 0, 0);
 caret-color: hsl(0, 97%, 50%);
}

Answer 6

Si las mayúsculas están bien en su contexto, un truco fácil es usar la variante de fuente del atributo css : small-caps; para obtener el caret más grande que el texto.

Otro enfoque es crear su propio cursor usando un reemplazo de campo de entrada, alguien pasó un tiempo y logró que algo funcionara , pero el autor recomienda seguir usando el cursor estándar.

Answer 7

<style>
.input_strips {
font-family: monospace;

<!--change the font size this will change the input cursor and the text box-->
font-size: 30px; 
}
</style>