Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

remove borders around html input

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?

like image 415
Timeless Avatar asked Jan 31 '13 03:01

Timeless


People also ask

How do I turn off borders in HTML?

Note: you can use “border: none;” or “border: 0px;”. Either way it results in the outside border being removed from your table.


2 Answers

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)

like image 169
Murray Rowan Avatar answered Oct 22 '22 22:10

Murray Rowan


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 🙂

like image 29
Dipak Avatar answered Oct 22 '22 22:10

Dipak