css中文本框中不点击就有字

在前端开发中，我们常常需要用到表单，在表单中，文本框是其中最基本的元素之一。然而，有些时候我们需要在文本框中预填入一些内容，但同时又希望用户在未点击文本框的情况下能够清晰地知道文本框中预填入的内容。如何在不点击文本框的情况下，在文本框中显示默认文字呢？

input[type="text"]{
  color: gray;
}

input[type="text"]:focus {
  color: black;
}

input[type="text"]:not(:focus){
  font-style: italic;
} 

上述代码中，我们首先将文本框中的字体颜色设置为灰色色值，然后用:focus伪类来判断用户是否点击了文本框。如果点击了文本框，我们将字体颜色设置为默认的黑色色值。如果用户未点击文本框，则使用:not(:focus)伪类来给文本框中预填入的内容添加斜体效果，以便用户能够更清晰地看到。

以上就是关于如何在css中实现让文本框中不点击就有字的方法。通过使用:focus和:not(:focus)伪类实现，可以让我们的表单更加美观并提高用户体验。希望本文对你有所帮助！