[英]Styling text input caret
我想為焦點<input type='text'/>
的脫字符設置樣式。 具體來說,顏色和厚度。
'Caret' 是您要查找的詞。 不過我確實相信,它是瀏覽器設計的一部分,而不是在 css 的掌握范圍內。
但是,這里有一篇關於使用 Javascript 和 CSS 模擬插入符號更改的有趣文章http://www.dynamicdrive.com/forums/showthread.php?t=17450對我來說似乎有點 hacky,但可能是唯一的方法完成任務。 文章的主要觀點是:
我們將在屏幕上的某個地方有一個純文本區域,在查看器的視圖之外,當用戶點擊我們的“假終端”時,我們將聚焦到文本區域,當用戶開始輸入時,我們將簡單地將輸入的數據附加到文本區域中到我們的“終端”,就是這樣。
這里是一個演示在行動
有一個新的 css 屬性caret-color
適用於input
或contenteditable
區域的插入符號。 支持在增長,但不是 100%,這只會影響顏色,不會影響寬度或其他類型的外觀。
input{ caret-color: rgb(0, 200, 0); }
<input type="text"/>
如果您使用的是 webkit 瀏覽器,您可以按照下一個 CSS 片段更改插入符號的顏色。 我不確定是否可以使用 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;
}
這是一個例子: http : //jsfiddle.net/8k1k0awb/
在 CSS3 中,現在有一種本地方法可以做到這一點,而沒有現有答案中建議的任何技巧: caret-color
屬性。
您可以使用插入符號做很多事情,如下所示。 它甚至可以是動畫。
/* 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);
Firefox 55 和 Chrome 60 支持caret-color
屬性。 Safari Technical Preview 和 Opera(但尚未在 Edge 中)也提供支持。 您可以在此處查看當前的支持表。
這里有一些你可能要找的供應商
::-webkit-input-placeholder {color: tomato}
::-moz-placeholder {color: tomato;} /* Firefox 19+ */
:-moz-placeholder {color: tomato;} /* Firefox 18- */
:-ms-input-placeholder {color: tomato;}
您還可以設置不同狀態的樣式,例如焦點
:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder {color: transparent}
:focus:-moz-placeholder {color: transparent}
:focus:-ms-input-placeholder {color: transparent}
您還可以對其進行某些轉換,例如
::-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;}
以這種方式將color屬性與-webkit-text-fill-color一起使用就足夠了:
input { color: red; /* color of caret */ -webkit-text-fill-color: black; /* color of text */ }
<input type="text"/>
適用於 WebKit 瀏覽器(但不適用於 iOS Safari,其中插入符號仍使用系統顏色)和 Firefox。
-webkit-text-fill-color CSS 屬性指定text 字符的填充顏色。 如果未設置此屬性,則使用顏色屬性的值。 MDN
所以這意味着我們使用 text-fill-color 設置文本顏色,使用標准顏色屬性設置插入符號顏色。 在不受支持的瀏覽器中,插入符號和文本將具有相同的顏色——插入符號的顏色。
input{ caret-color: rgb(0, 200, 0); }
<input type="text"/>
很簡單。 只需像這樣添加 caret-color 屬性:
* {cursor: url(http://labs.semplice.com/wp-content/uploads/2020/02/custom-cursor-arrow.png) 20 20, auto;} input, div {padding: 20px;}
<input style="caret-color: rgb(0, 200, 0);"> <br> <textarea style="caret-color: blue;"></textarea> <br> <div contenteditable style="padding: 5px; border: 1px solid black;border-color: black;caret-color: red"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.