How to reposition a misplaced cursor/blinker in the textarea? - html

Question

I have an issue where the cursor/blinker is right in the top left of the textarea with no margin or whatsoever. I don't know what could be causing this, the other inputs are working fine. Here is a screen shot:
I also wanna know how to change that black border color? I would like the border to stay the same when I click on it. I tried using textarea:focus to get rid of it but it's not working.
Lastly I wanna get rid of this whitish background when a form gets auto-completed, I haven't figured out how to get rid:
HTML:
<form class="form appear appear-hidden" method="post">
<h1>Contact Me</h1>
<div class="name-section">
<input type="name" placeholder="Name" required />
<input type="surname" placeholder="Surname" required />
</div>
<input type="email" placeholder="Email" required />
<textarea
class="message"
type="message"
placeholder="Message"
row="4"
required
></textarea>
<input class="submit" type="submit" placeholder="submit" />
</form>
CSS:
.name-section input {
width: 48%;
margin: 5px;
border: 2px solid white;
padding: 10px;
background-color: transparent;
font-weight: 600;
}
form input {
width: 98%;
margin: 5px;
border: 2px solid white;
padding: 10px;
/* background-color: #000; */
background-color: transparent;
font-weight: 600;
color: white;
font-family: 'Poppins', sans-serif;
}
input::placeholder {
font-family: 'Poppins', sans-serif;
color: white;
font-weight: 600;
}
input:focus {
border: 1px solid white;
}
textarea {
min-height: 100px;
background-color: transparent;
color: white;
font-family: 'Poppins', sans-serif;
width: 98%;
margin: 5px;
border: 2px solid white;
resize: none;
font-weight: 600;
}
textarea::placeholder {
color: white;
padding: 10px;
margin: 10px;
font-weight: 600;
}
Thanks in advance for the help.

Answer 1

You have no padding in your Textaria, try this: remove padding from textarea::placeholder and add padding to .message :
textarea::placeholder {
margin: 10px;
font-weight: 600;
}
.message{
padding:10px;
}
To remove the "black-border-color:
input:focus{
outline:solid 3px blue;
}
I didn't understand what you mean by this: "Lastly I wanna get rid of this whitish background when a form gets auto-completed, I haven't figured out how to get rid:"