45

Web アプリの検索機能を作成したいと考えています。

FFとIEの見た目はこちら、変な縁取りなしでOK

ファイアフォックス

ここに画像の説明を入力

IE

ここに画像の説明を入力

これがChromeとSafariの外観です。入力要素の周りに奇妙な境界線があります

クロム

ここに画像の説明を入力

サファリ

ここに画像の説明を入力

これが私のhtmlとcssコードです

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

がborder:0すべての要素に適用されました

ここに画像の説明を入力

#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;
}

その境界線を取り除く方法は？

4

8 に答える 8

78

border: 0十分なはずですが、そうでない場合は、ボタンのブラウザーのデフォルトのスタイルが干渉している可能性があります。に設定appearanceしてみましたかnone（例-webkit-appearance: none）

于 2013-01-31T05:13:43.823 に答える
24 
border-width:0px;
border:none;

私はこれを使用しましたが、ほとんどのブラウザー (Chrome、Safari、FF、IE など) で問題なく動作しました。

于 2013-01-31T03:46:03.570 に答える
2

あなたのコードはこの jsfiddle.net/NTkGZ/のようになります

試す

border:none;
于 2013-01-31T05:10:34.507 に答える
0

これを試して

#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;
}

画像のサイズが間違っている可能性があると思います

于 2013-01-31T04:04:53.923 に答える
-1

これを使用してください。これがお役に立てば幸いです... border:none !important; 背景色:透明;

これを試して

<div id="generic_search"><input type="search" onkeypress="return runScript(event)" /></div>
<button type="button" id="generic_search_button" /></button>
于 2013-01-31T03:54:50.967 に答える