造型文字输入插页 [英] Styling text input caret

问题描述

我想要着重于< input type ='text'/> 的插入符号。具体来说就是颜色和厚度。如果您使用的是webkit浏览器，您可以按照以下步骤更改插入符号的颜色： 下一个CSS片段。我不确定是否可以用CSS来改变格式。

 输入，
 textarea {
 font-size：24px; 
 padding：10px; 
 
颜色：红色; 
 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; 
} 
  

下面是一个例子： http://jsfiddle.net/8k1k0awb/

I want to style the caret of a focused <input type='text'/>. Specifically, the color and thickness.

解决方案

If you are using a webkit browser you can change the color of the caret by following the next CSS snippet. I'm not sure if It's possible to change the format with 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;
}

Here is an example: http://jsfiddle.net/8k1k0awb/

这篇关于造型文字输入插页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！