3

これが私のhtmlです：

    <form action="/" method="get" class="searchForm">
        <input type="search" placeholder="Search...">
        <input type="submit" value="">
    </form>

そして私のCSS：

    input[type="search"]{
        height: 31px;
        width: 254px;
        border: 1px solid #ccc;
        border-right: none;
        padding: 0 5px;
        float: left;
        border-radius: 5px 0 0 5px;
    }

各コーナーに等しい半径を与えるモバイルサファリを除くすべてのブラウザーで正常に機能します。入力タイプをテキストに変更すると機能しますが、検索と送信では機能しません。

私は追加しようとしました：

    input {
        -webkit-appearance: none;
        border-radius: 0 !important;
    }

何か案は？前もって感謝します！

4

1 に答える 1

1

あなたが試すことができます

  1. 境界線の半径に-webkitプレフィックスを使用します。
  2. ボーダー半径を使用したロングハンドバージョン（これを参照：-http：//blog.lesjames.com/post/8510513712/mobile-safari-and-border-radius）

これが機能しない場合は、iOSバージョン、ipad/iphoneなどの詳細を提供してみてください。私はiOS5.1と4.3を搭載したiPhoneでテストしましたが、-webkit-appearance：noneを使用すると完璧に機能しました。

于 2012-05-30T09:48:00.817 に答える