How to get rid of the black line on the border of the inputs and textarea

Question

I have been struggling to get rid of this line when I click on a specific input. Here is an example:

HTML:

<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>

CSS:

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;
 }

 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;
}

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.

https://stackoverflow.com/questions/1457849/how-to-remove-the-border-highlight-on-an-input-text-element — epascarello, Jul 19 '22 at 15:39

score 3 · Accepted Answer · answered Jul 19 '22 at 15:39

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 use outline:none.


form input:focus {
  border: none;
outline:none;
 }

textarea {
outline:none;
}

How to get rid of the black line on the border of the inputs and textarea

1 Answers1