I have been struggling to get rid of this line when I click on a specific input. Here is an example:
form input {
width: 98 % ;
margin: 5 px;
border: 2 px solid white;
padding: 10 px;
/* background-color: #000; */
background - color: transparent;
font - weight: 600;
color: white;
font - family: 'Poppins',
sans - serif;
}
form input: focus {
border: none;
}
textarea {
min - height: 100 px;
background - color: transparent;
color: white;
font - family: 'Poppins', sans - serif;
width: 98 % ;
margin: 5 px;
border: 2 px solid white;
resize: none;
font - weight: 600;
padding: 10 px;
}<form class="form appear appear-hidden" method="post">
<h1>Contact Me</h1>
<div class="name-section">
<input name="name" type="name" placeholder="Name" required />
<input name="name" type="surname" placeholder="Surname" required />
</div>
<input name="email" type="email" placeholder="Email" required />
<textarea name="message" type="message" placeholder="Message" row="4" required></textarea>
<input class="submit" type="submit" placeholder="submit" />
</form>I’m just looking for a solution that will help me to get rid of the black border when the input is focused on. This Black border doesn’t appear when an input is not focused on.
Thanks in advance for the help.
>Solution :
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;
}
form input:focus {
border: none;
outline: none;
}
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;
padding: 10px;
outline: none;
}<form class="form appear appear-hidden" method="post">
<h1>Contact Me</h1>
<div class="name-section">
<input name="name" type="name" placeholder="Name" required />
<input name="name" type="surname" placeholder="Surname" required />
</div>
<input name="email" type="email" placeholder="Email" required />
<textarea name="message" type="message" placeholder="Message" row="4" required></textarea>
<input class="submit" type="submit" placeholder="submit" />
</form>- It is outline.
Just useoutline:none.
form input:focus {
border: none;
outline:none;
}
textarea {
outline:none;
}