How do I change the color of the text-cursor in html/css?-CodePudding

I am currently new to HTML and CSS and do not have much knowledge about them. Recently, I came across a problem where my text-cursor is not visible when the background-color of a <div> element is darkish.

Here is an example:

<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>

Now when ever I try to focus the text written inside of a <div> element with this as the class my text cursor becomes transparent.

Is there any way to prevent this from happening? Is there a way to change the color of the text-cursor to the color of the cursor i.e red?

Here is the <div> code:

<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>

CodePudding user response：

The caret-color property is only supposed to apply to input elements and similar - elements that are intended to be user editable. So, if you apply is to a div (as here), you'll get unexpected results. (And, I suspect that you mean "invisible" rather than "transparent" - unless you actually see transparency being applied, but I suspect it's just that you can't see it against the dark background.)

Do you mean that you want the background colour of the highlighted text to be different from the default? In which case you need to set the background-color property for .PreCode::selection in your CSS.

Also, bear in mind that the way the cursor is rendered on screen depends on your browser and also your operating system. There are ways to set a custom cursor, but I don't think that's your problem here. The default cursor shapes and colours depend ultimately on the reader (i.e. your user's browser and OS). On my system, for example, the pointer is a black arrow with a white outline, and the text marker similarly has an outline. So, whatever background it's on, it remains visible.

It also depends what you mean by "cursor": the mouse pointer? The text-position marker? The actual cursor (the often-flashing vertical line that marks the text-input position)? Because the actual cursor will only be displayed in an editable element (as above), because it marks a text-input position and there isn't one of those at all if the text element doesn't accept user input.

CodePudding user response：

you face that issue because you don't make changes on that line the caret-cursor property is used when you wanna make changes on any text, para, input, and etc.

Caret-Cursor : Set the color of the cursor in input elements.

if you wanna make your cursor color change in the div or see work or not you can add the contenteditable before the class then your code work properly and you also edit your text.

follow the code for the desired output.

<div contenteditable 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.

now your code work properly if you want any help then ping me.

Thanks