検索窓をsafariのように角丸にする方法

質問

safariのように他のブラウザでも検索窓を角丸にする方法ってありますでしょうか？色々試してcssで両端に角丸画像を付け足す方法が一番良いかなと思ったのですが、今度はsafariでみると両端に線が入っている状態になってしまいます。
safariでも他のブラウザでも同じように見せる方法がありましたら教えてください。

回答No.1

matchasoft · ベストアンサー

実際に試せる環境がないので未確認で申し訳ないのですが…。

以下のように対象となるinputタグの枠をなくし、背景色を透明にした上で、背景画像として角丸画像を貼り付ければいかがでしょうか。
input {
border-width: 0px;
background-color: transparent;
background-image: url("角丸画像のURL");
}

上記に加えて、背景画像に合わせるようにwidth、height、paddingを設定する必要があります。

回答No.2

izayoimizuki

可変長性を加えるにはinputをtableで囲う方法があります。

以下のような感じで。
<table>
<tr><td style="background:url(左上の画像) no-repeat;"></td><td style="background:url(上の画像) repeat-x;"></td><td style="background:url(右上の画像) no-repeat;"></td></tr>
<tr><td style="background:url(左の画像) repeat-y;"></td><td><input /></td><td style="background:url(右の画像) repeat-y;"></td></tr>
<tr><td style="background:url(左下の画像) no-repeat;"></td><td style="background:url(下の画像) repeat-x;"></td><td style="background:url(右下の画像) no-repeat;"></td></tr>
</table>
複雑にはなりますが可変幅,可変高の両方が実現できます。
textarea等にも適用できます。

補足

izayoimizukiさん、ありがとうございます。
しかし、残念ながら上記の方法でもsafariのフォームの枠は消えませんでした。
せめてsafariのフォームの枠線（両端）の枠を消すことができればと思うんですが、難しいですね・・・