Remove Borders Around HTML Input

remove borders around html input

border: 0 should be enough, but if it isn't, perhaps the button's browser-default styling in interfering. Have you tried setting appearance to none (e.g. -webkit-appearance: none)

Remove border of input

If you want to remove border and background of your input simply use this code:

input {

    border: none;

    background-color: transparent;

 }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table">

<tr><td id="forReport"><form method="POST"><input name="excelAddress" type="text" value="Калинина 15 а" disabled='disabled'><button type="submit" target="_blank" class="generateReport btn btn-primary btn-sm"></i> button</button></form></td><td>751</td></tr></table>

How to remove an input border?

You can remove it with outline:none, but it creates accessibility issues.

input {

  font-size: 300%;

  border-width: 10px;

  border-style: solid;

  border-radius: 30px;

  outline:none;

}

<input>

How to remove focus border (outline) around text/input boxes? (Chrome)

This border is used to show that the element is focused (i.e. you can type in the input or press the button with Enter). You can remove it with outline property, though:

textarea:focus, input:focus{
    outline: none;
}

You may want to add some other way for users to know what element has keyboard focus though for usability.

Chrome will also apply highlighting to other elements such as DIV's used as modals. To prevent the highlight on those and all other elements as well, you can do:

*:focus {
    outline: none;
}

---

⚠️ Accessibility warning

Please notice that removing outline from input is an accessibility bad practice. Users using screen readers will not be able to see where their pointer is focused at. More info at a11yproject

How to remove the border highlight on an input text element

Before you do that, keep in mind that the focus outline is an accessibility and usability feature; it clues the user into what element is currently focused, and a lot of users depend on it. You need to find some other means to make focus visible.

In your case, try:

input.middle:focus {
    outline-width: 0;
}

Or in general, to affect all basic form elements:

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

---

In the comments, Noah Whitmore suggested taking this even further to support elements that have the contenteditable attribute set to true (effectively making them a type of input element). The following should target those as well (in CSS3 capable browsers):

[contenteditable="true"]:focus {
    outline: none;
}

Although I wouldn't recommend it, for completeness' sake, you could always disable the focus outline on everything with this:

*:focus {
    outline: none;
}

Remove border from input box bootstrap

Being very silly, in the index.html I have added bootstrap stylesheet then my custom one and again bootstrap. Deleting last line solved all my problems.

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

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

Remove the border of an input field, but leave the bottom

Simply remove all borders except for the bottom one on all input fields using CSS. See the code snippet below.

input {
  margin: 20px;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom:0.5px solid black;
}

<input type="text"> <br />
<input type="text"> <br />
<input type="text">

Remove weird border from input text field

Changes I made ->

border:0px solid #58B9FA; 

line 105.

---

Related Topics