remove borders around html input

2019-03-24 05:21发布

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?

7条回答
姐就是有狂的资本
2楼-- · 2019-03-24 05:33

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>
查看更多
够拽才男人
3楼-- · 2019-03-24 05:36

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;
查看更多
太酷不给撩
4楼-- · 2019-03-24 05:38

It's simple

input {border:0;outline:0;}
input:focus {outline:none!important;}
查看更多
孤傲高冷的网名
5楼-- · 2019-03-24 05:40
border-width:0px;
border:none;

Will work fine.

查看更多
Deceive 欺骗
6楼-- · 2019-03-24 05:40

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

try

border:none;
查看更多
Bombasti
7楼-- · 2019-03-24 05:46

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

查看更多
登录 后发表回答