Text fields (textarea, text, etc.) do not show the mouse pointer or typed text

Question

Good night, you guys!

I am developing an environment for creating questionnaires and, at the time of collecting data on the questions, I have a form for each type of question, which is selected by a "dropdown-menu". It turns out that the text fields of these forms are "wrong" somehow. The mouse pointer does not appear after selecting the field (click on the text field). The typed text also does not appear.

This problem only occurs in the fields that are within the tabs scheme, the field reading the title of the questionnaire is without problems, so I imagine it may be something related to these tabs and/or the selection "dropdown-menu".

Follows the project in codepen: https://codepen.io/AmygdalaClicker/pen/ZavgBq

There’s probably a lot of unfinished business, and when it comes to the control part, maybe even wrong things, so I ask you to ignore it for now. I would just like to solve the problem of text fields.

From now on, thank you!

Answer 1

The problem is in color:#fff; class:

.tab-content{
    background-color: #B0C4DE;
    color:#fff;
    padding:5px
}

How are you with white text color style (#fff), the text is illegible in textarea and us input white background. Apply a color to these elements by adding the code to the CSS:

textarea, input{
  color: #000; /* neste caso, cor preta */
}