remove borders around html input

Question

I want to create a search function for my web app   here are the looks on FF  amp  IE  it is ok without strange border  Firefox    IE    and here are the look on Chrome  amp  Safari  it has strange border around the input element  Chrome    Safari    Here is my html  amp  css code   lt input type  search  id  generic search  onkeypress  return runScript event     gt   lt input type  button  id  generic search button    gt    the border 0 has been applied to all elements     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

User · Accepted Answer

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

User · Answer

border-width 0px  border none    Will work fine

User · Answer

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

User · Answer

use this i hope this help ful to you    border none  important  background-color transparent   try this   lt div id  generic search  gt  lt input type  search  onkeypress  return runScript event     gt  lt  div gt   lt button type  button  id  generic search button    gt  lt  button gt

User · Answer

It s simple  input  border 0 outline 0   input focus  outline none important

User · Answer

your code is look like this  jsfiddle net NTkGZ     try   border none

User · Answer

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

[css] remove borders around html input

Examples related to css

Examples related to cross-browser

Examples related to zurb-foundation