Gray background in a input field makes cursor invisible-CodePudding

When using gray background with input fields, all cursors become completely invisible. I'm quite new to html/css and I could not find any way to fix it.

input, textarea {

  background-color: gray; 

}

<input type="text" />
<br /><br />
<textarea></textarea>
<br /><br />
<input type="button" value="button" />

CodePudding user response：

Try using caret-color css prop. This will change the color of your caret making it more visible.

input,
textarea {
  background-color: gray;
  caret-color: white;
}

<input type="text" />
<br /><br />
<textarea></textarea>
<br /><br />
<input type="button" value="button" />

CodePudding user response：

You can apply some styles to your cursor using caret-color::

.example1 {
  caret-color: red;
}

https://www.w3schools.com/cssref/css3_pr_caret-color.asp

However, when you try to build a website or using HTML/CSS try to know if it is available for all the browsers: https://caniuse.com/?search=caret