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?

3
  • 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, 2013 at 3: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) Jan 31, 2013 at 3:53
  • @MurraySmith -webkit-appearance: none works fine!
    – Timeless
    Jan 31, 2013 at 3:59

9 Answers 9

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)

48

It's simple

input {border:0;outline:0;}
input:focus {outline:none!important;}
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 🙂

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;
2
  • Right. I omitted the standard things for brevity, but you're correct. I will update the answer for clarity. Thanks.
    – isapir
    Oct 29, 2017 at 16:27
  • 1
    Foundation 6 is an example of a framework which requires this.
    – Charles
    Jun 26, 2020 at 2:07
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;
}
1
  • Thanks, that's what I was missing, the outline!
    – Sasino
    Dec 4, 2021 at 21:19
2

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

try

border:none;
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

0
0

Try the following code:

.yourClassName{
    border: 0;
    outline: none;
   }
-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>
0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.