How can I remove the black outline around my input areas?

Question

So I have these black boxes go round the input area on the form I am building. Is there a way I can remove this, I am also using bootstrap not sure if that is affecting it but if there is any ideas. Greatly appreciated!

.form-input-styling {
  border-radius: 0 2em;
  padding: 0 10px;
  width: 50%;
  border: none;
  line-height: 2em;
  margin-bottom: 20px;
  background-color: #f25b43;
}

  <div class="row">
            <div class="col-12"><input class="form-input form-input-styling" type="text" id="fname" name="fname" required placeholder="Name"></div>
            <div class="col-12"><input class="form-input form-input-styling" type="email" id="email" name="email" required placeholder="Email"></div>
            <div class="col-12"><input class="form-input form-input-styling" type="tel" id="phone_num" name="phone_num" placeholder="Phone Number"></div>
            <div class="col-12"><textarea id="text-area" name="textarea" rows="4" cols="50" placeholder="Enter Your Message Here"></textarea></div>
            <div class="col-12"><input type="submit" value="Submit"></div>
    </div>

I think you'll want to reset the border on the `:focus` styles — Kyle Pollard, Nov 27 '20 at 20:09
Use your browser inspector to find out which CSS rule is setting this border box and then adjust accordinghly. You may need to increase your CSS Specificity for your CSS rule such as `input.form-input-styling`, etc. — Martin, Nov 27 '20 at 20:09
add this style: `outline: none` to the input, it will work as you are expecting to work — Prathamesh Koshti, Nov 27 '20 at 20:17
Definitely don't remove the outline. http://www.outlinenone.com/ https://medium.com/better-programming/a11y-never-remove-the-outlines-ee4efc7a9968 — jmargolisvt, Nov 27 '20 at 20:22
Does this answer your question? [How to remove the border highlight on an input text element](https://stackoverflow.com/questions/1457849/how-to-remove-the-border-highlight-on-an-input-text-element) — jmargolisvt, Nov 27 '20 at 20:24

score 2 · Accepted Answer · answered Nov 27 '20 at 20:27

2

Add outline: none; to your css for the input element.

.form-input-styling {
  border-radius: 0 2em;
  padding: 0 10px;
  width: 50%;
  border: none;
  outline: none;
  line-height: 2em;
  margin-bottom: 20px;
  background-color: #f25b43;
}

answered Nov 27 '20 at 20:27

cssyphus

37,875
18
96
111

How can I remove the black outline around my input areas?

1 Answers1