63

I want to create a search function for my web app.

here are the looks on FF & IE, it is ok without strange border

Firefox

enter image description here

IE

enter image description here

and here are the look on Chrome & Safari, it has strange border around the input element

Chrome

enter image description here

Safari

enter image description here

Here is my html & css code

<input type="search" id="generic_search" onkeypress="return runScript(event)" />
<input type="button" id="generic_search_button" />

the border:0 has been applied to all elements

enter image description here

#generic_search
{
    font-size: 14px;
    width: 250px;
    height: 25px;
    float: left;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 7px;
}
#generic_search_button
{
    float: left;
    width: 25px;
    height: 25px;
    margin-top: 7px;
    cursor: pointer;
    background-color: White;
    background-image: url(/Images/search.png);
    background-repeat: no-repeat;
    background-position: center center;
}

How to remove that border?

isapir
  • 21,295
  • 13
  • 115
  • 116
Timeless
  • 7,338
  • 9
  • 60
  • 94
  • Did you try to apply `border: none` directly to `#generic_search`? You also can try `border-color: transparent` just in case, but if the border is displayed, it will still take space. – esycat Jan 31 '13 at 03:41
  • 1
    `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`) – Murray Rowan Jan 31 '13 at 03:53
  • @MurraySmith `-webkit-appearance: none` works fine! – Timeless Jan 31 '13 at 03:59

9 Answers9

87

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)

Murray Rowan
  • 3,597
  • 2
  • 19
  • 32
48

It's simple

input {border:0;outline:0;}
input:focus {outline:none!important;}
Sina Kuhestani
  • 481
  • 4
  • 2
25
border-width:0px;
border:none;

I have used this, and in most of the browsers (Chrome, Safari, FF, IE, etc), it worked fine for me

Dipak
  • 6,532
  • 8
  • 63
  • 87
14

In my case I am using a CSS framework which adds box-shadow, so I had to also add 

box-shadow: none;

So the complete snippet is:

border: none; 
border-width: 0; 
box-shadow: none;
isapir
  • 21,295
  • 13
  • 115
  • 116
6

I use this css code to remove focus input border some times. Hope will help you -:

  input:focus, textarea:focus, select:focus{
    outline: none;
}
Devansh Anand
  • 71
  • 1
  • 1
2

your code is look like this jsfiddle.net/NTkGZ/

try 

border:none;
Ulysses Alves
  • 2,297
  • 3
  • 24
  • 34
Pawan Lakhara
  • 1,146
  • 4
  • 16
  • 28
0

Try this 

#generic_search_button
{
    float: left;
    width: 24px; /*new width*/
    height: 24px; /*new width*/
    border: none !important; /* no border and override any inline styles*/
    margin-top: 7px;
    cursor: pointer;
    background-color: White;
    background-image: url(/Images/search.png);
    background-repeat: no-repeat;
    background-position: center center;
}

I think the image size might be wrong

basarat
  • 261,912
  • 58
  • 460
  • 511
0

Try the following code:

.yourClassName{
    border: 0;
    outline: none;
   }
My Car
  • 4,198
  • 5
  • 17
  • 50
Luis
  • 19
  • 1
-1

use this i hope this help ful to you... border:none !important; background-color:transparent;

try this

<div id="generic_search"><input type="search" onkeypress="return runScript(event)" /></div>
<button type="button" id="generic_search_button" /></button>
Vbiz Solutions
  • 27
  • 5