1

クロムがテキストボックスに追加する境界線を削除したい。ここに私がすでに試したhtmlとcssがあります。

HTML:

<input id="searchbar" type="search" placeholder="Search" />

CSS:

input[type=search],
input[type=search]:hover,
input[type=search]:focus,
input[type=search]:active
{
    border: 0;
    outline: none;
    outline-offset: 0;
    background-color:transparent
}

ご意見をお聞かせください。IE には境界線が追加されておらず、テキスト ボックスはまったく問題なく表示されます。

更新：画像を添付する（ChromeでもIE10で表示されるものを実現したい）

ここに画像の説明を入力

4

3 に答える 3

2

追加-webkit-appearance:none;すると解決します。これは、WebKit のフォーム コントロールの便利なハックです。

于 2013-04-27T11:53:56.097 に答える
0

@int32_t と @soheil の両方のソリューションを試しました。Chrome と Safari は同じ Webkit エンジンを使用していますが。Safari とその他のバリアント IOS、iPad、および iPhone の動作は少し異なります。

したがって 

-webkit-appearance:none;

Chromeでは動作しましたが、Safariでは動作しませんでした

outline:none

ChromeではなくSafariで動作しました

より安全にするために、これを使用できます

.noBorderNoHeighlight{
    border: none;      /* Good browsers universal rule */
    outline: none;     /* safari and its variants  */
    outline-offset: 0; /* IE and its variants  */
    -webkit-appearance:none; /* Chrome and its variants  */
}
于 2014-06-20T12:45:59.140 に答える