如何更改 html/css 中文本光標的顏色？

Question

我目前是 HTML 和 CSS 的新手，對它們知之甚少。 最近，我遇到了一個問題，當<div>元素的背景顏色較暗時，我的文本光標不可見。

下面是一個例子：

<style>
    .PreCode {
         font-family: Georgia, 'Times New Roman', Times, serif;
         font-size: initial;
         color: rgb(28,26,26);
         background-color: grey;
         border: 1px solid black;
         text-transform: capitalize;
         font-weight: 100;
         margin-top: 20px;
         text-align: center;
         padding: 10px;
         }
</style>

現在，當我嘗試將寫在<div>元素內的文本作為類時，我的文本光標變得透明。

有什么辦法可以防止這種情況發生嗎？ 有沒有辦法將文本光標的顏色更改為光標的顏色，即紅色？

這是<div>代碼：

<div class="PreCode">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla necessitatibus dolorem suscipit. Quibusdam dolorem eos sunt voluptate neque, unde expedita, error modi, assumenda quisquam repudiandae iste provident rerum vel blanditiis.
</div>

Answer 1

caret-color屬性僅應用於input元素和類似元素，這些元素旨在供用戶編輯。 因此，如果您將 is 應用到一個div （如此處），您將得到意想不到的結果。 （而且，我懷疑你的意思是“不可見”而不是“透明”——除非你真的看到應用了透明度，但我懷疑這只是你在黑暗背景下看不到它。）

您的意思是希望突出顯示文本的背景顏色與默認值不同嗎？ 在這種情況下，您需要在 CSS 中為.PreCode::selection設置background-color屬性。

另外，請記住，光標在屏幕上的呈現方式取決於您的瀏覽器和操作系統。 有多種方法可以設置自定義光標，但我認為這不是您的問題。 默認的光標形狀和顏色最終取決於閱讀器（即您用戶的瀏覽器和操作系統）。 例如，在我的系統上，指針是一個帶有白色輪廓的黑色箭頭，文本標記也同樣有一個輪廓。 因此，無論它處於什么背景，它仍然可見。

這也取決於你所說的“光標”是什么意思：鼠標指針？ 文本位置標記？ 實際的光標（標記文本輸入位置的經常閃爍的垂直線）？ 因為實際光標只會顯示在可編輯元素中（如上），因為它標記了文本輸入位置，如果文本元素不接受用戶輸入，則根本沒有這些位置。

Answer 2

您面臨這個問題，因為您沒有對該行進行更改，當您想對任何文本、段落、輸入等進行更改時，會使用插入符號光標屬性。

Caret-Cursor ：設置輸入元素中光標的顏色。

如果您想在 div 中更改光標顏色或查看工作與否，您可以在課程之前添加contenteditable ，那么您的代碼可以正常工作，並且您還可以編輯文本。

遵循所需輸出的代碼。

<div contenteditable class="PreCode">

Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英。 Nulla necessitatibus dolorem suscipit。 Quibusdam dolorem eos sunt voluptate neque、unde expedita、error modi、assumenda quisquam repudiandae iste Provident rerum vel blanditiis。

現在您的代碼可以正常工作，如果您需要任何幫助，請 ping 我。

謝謝