Remove border of input

Question

I have a table where in one td there is form with input and submit button. I want totally remove the box of input. Is it possible? http://jsfiddle.net/ajeozmwa/2/

possible duplicate of http://stackoverflow.com/questions/3397113/how-to-remove-border-outline-around-text-input-boxes-chrome or http://stackoverflow.com/questions/14618028/remove-borders-around-html-input — web-tiki, Sep 22 '14 at 15:16

score 11 · Accepted Answer · edited Jul 20 '17 at 08:42

11

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>

edited Jul 20 '17 at 08:42

Jonathan

2,700
4
23
41

answered Sep 22 '14 at 15:17

Kamil

1,987
16
14

You may also want to style the input:focus to remove the outline (by setting it to 0) – Software Engineer Sep 22 '14 at 16:14

score 3 · Answer 2 · answered Jan 01 '20 at 11:58

3

Try this in your css file:

  input:focus,
  input:active {
   box-shadow: none !important;
   -moz-box-shadow: none !important;
   -webkit-box-shadow: none !important;
   outline: none !important;
 }

answered Jan 01 '20 at 11:58

Ar26

949
1
12
29

score 0 · Answer 3 · answered Sep 22 '14 at 15:20

0

Just add border:none to the input like this: link.

And if you want to remove background you can use background:none; like here.

answered Sep 22 '14 at 15:20

Florin Pop

5,105
3
25
58

I think I know you :) your answer is outdated and doesn't work on Chrome; please update so I will be first to upvote "the florin" answer :) – vikramvi Jun 23 '21 at 11:43

Remove border of input

3 Answers3