44

いくつかのテキスト入力を含む Web ページがあります。Android ブラウザー (少なくとも Android 2.3.4 ではこれですべてです) は、フォーカスのあるページの入力に対して独自のコントロールをオーバーレイしているようです。

問題は、オーバーレイされたコントロールが白い四角形で、見栄えが悪いことです。それを無効にする方法、または何らかの方法でスタイルを設定する方法はありますか?

アップデート：

Android エミュレーターの例を次に示します。

ここに画像の説明を入力

丸みを帯びた角と背景が失われます。実際のデバイスでは、コントロールの周りに境界線さえ表示されません。

私は jQuery Mobile を使用していることに言及する必要があります。私のテスト デバイスは HTC Evo 4G です。

関連する質問:

フォーカス時の入力スタイルが異なる

HTC デバイスで強調表示されている場合、WebViews の入力要素は常に同じスタイルになります

4

8 に答える 8

19

最後に、Android 2.3 デバイスでこの問題を解決しました。

オーバーレイを実際に削除することはできませんが、オーバーレイをビューポートの外に移動することは可能です。

オーバーレイは、入力フィールドと同じ位置に配置しようとします。割り当てた幅と位置オフセットをコピーします

position:relative

と

top:-10000px

ただし、オーバーレイは、割り当てられた位置オフセットをコピーしません

-webkit-transform: translate3d()

これにより、iScroll などの JS ライブラリでいくつかの問題が発生します。

しかし、これはオーバーレイを隠すのにも役立ちます:

input[type="password"], input[type="text"]{
  position:relative;
  top:-10000px;
  -webkit-transform: translate3d(0, 10000px, 0);
}

ビューポートの外に入力フィールドを配置します。オーバーレイはその横に配置されます。次に、translate3d() を使用して古い位置に移動します。

このソリューションは、モバイル Web フレームワーク「qooxdoo Mobile」で既に使用しています: http://demo.qooxdoo.org/devel/mobileshowcase/index.html#%2Fform

于 2013-06-19T14:57:12.713 に答える
14

次のコードは、タップのハイライトを削除します - [Android 4.0.3]

input{
   -webkit-user-modify: read-write-plaintext-only;
   -webkit-tap-highlight-color:#3072af;
}
于 2012-06-01T06:42:58.740 に答える
13

これが有効な解決策と答えであるかどうかはわかりませんが、これらをコメントアウトした後、私の入力は Android で再生され始めました。これにより、Android (HTC2.3) のテキスト入力と選択に大混乱が生じました。

/* really bad */
-webkit-backface-visibility: hidden; 

/* your normal bad */
-webkit-transform: rotateY(0deg); 
-moz-transform: rotateY(0deg); 
transform: rotateY(0deg);

デフォルトの入力をスタイルしたい場合、私はこれらを使用しています：

/* native placeholder styling */    
::-webkit-input-placeholder {
    color:#555555;  
    }
:-moz-placeholder {
    color:#555555;  
    }   
.inField label {
    color:#555555;
    cursor: text;   
}

最初の Webkit をコメントアウトした後、Android は問題なく動作しています。ただし、他の多くのものもオーバーライドしています。

以下のスクリーンショットもご覧ください。

入力で行ったことは、リストビューを作成し、すべての入力をリスト項目に入れ、すべての入力 JQM-CSS を削除することです。これにより、リストビュー項目の上に透明な入力が表示されるはずです。これは非常に見栄えが良いと思います。入力にラベルを追加することもできます。私の例は inField ラベル プラグインで動作するように設定されているため、これらのクラスもすべて既に搭載されています。

スクリーンショットは私の Android HTC 2.3.5 のもので、input type="search" を示しています。これは、ほとんどの JQM-css を取り除いたリストビュー検索フィルターです。リストビューからさらに削除し、フォームリストに配置し、ラベルを追加し（アクティブかどうかはわかりません）、アイコンを含むすべてのCSSを削除しました。

リストフォームの実行方法の例を次に示します。

 <ul data-role="listview" data-inset="true" class="inputList">
    <li data-role="fieldcontain" data-icon="false" class="inField ui-btn ui-corner-top" data-theme="c">
        <div class="ui-btn-inner" aria-hidden="true"><div class="ui-btn-text">
        <label for="item">item</label>
        <input type="text" name="item" id="item" />
        </div></div>
     </li>
     <li data-role="fieldcontain" data-icon="false" class="inField ui-btn ui-corner-bottom" data-theme="c">
        <div class="ui-btn-inner" aria-hidden="true"><div class="ui-btn-text">
        <label for="item2">item2</label>
        <input type="text" name="item2" id="item2" />
        </div></div>
     </li>
  </ul>

CSS:

.inputList li div.ui-btn-inner {
    background: none;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    }
 .inputList label {
    margin: 3px 0 0 !important;
    }
 // styling of text inputs! 
 .inputList input.ui-input-text, .inputList textarea.ui-input-text {
    width: 93%; 
    margin-left: 1%;
    padding: 0.6em 0;   
    text-indent: 80px; /* hard-coded - doesn't work on Android */
    border-width: 0px;
    background: transparent;    
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    box-shadow: none;   
    -moz-border-radius:0px; 
    -webkit-border-radius: 0px; 
    border-radius: 0px;
    }
.inputList .ui-li-divider:not(.input-divider), .inputList .ui-li-static, .inputList .ui-li-has-alt, .inputList .ui-link-inherit, .inputList .ui-btn-icon-notext .ui-btn-inner {
    padding: 0px !important;    
    }
// labels, from inField label plugin, but not active
.inField { 
    position:relative 
    }
.inField label { 
    line-height: 2.25em;
    vertical-align: middle;
    position:absolute; 
    left:8pt;
    width: inherit !important;  
    }

これがすべてCSSであることを願っています。これを設定しようとしていて、見栄えが悪い場合は、お知らせください。

私の HTC 2.3.4 では、このように作業するのはとても良いようです。私の CSS にはまだ磨きが必要です。入力の幅を減らして中央に配置する必要があるため、下のリスト項目の境界線が表示されたままになります。

それ以外は、これは厄介な Android 入力に対する優れたソリューションです。すべての JQM-CSS を取り除き、listview-li を後ろに置きます。

Android リストビュー検索フィルター入力

于 2012-02-27T12:14:17.247 に答える
6

これが私のコードです：

input {
    -webkit-user-modify: read-write-plaintext-only;
    -webkit-tap-highlight-color: rgba(255,255,255,0);
}
于 2012-08-16T09:29:16.817 に答える
4

ここで推測しているだけで、おそらくすでに試したことがあるでしょうが、

-webkit-appearance: none;

うまくいくかもしれません。私はAndroidデバイスさえ持っていませんが、iPhoneでは、デフォルトのブラウザーに適用されたスタイリングを完全に取り除くため、ほとんどの入力関連のスタイリングの問題を整理します。とにかく一見の価値あり！

于 2012-02-27T12:51:34.777 に答える
3 
-webkit-user-modify: read-write-plaintext-only;

-webkit-tap-highlight-color:rgba(0,0,0,0); アウトラインスタイル: なし;

これは Android 4.0 で正常に動作しますが、このコードを数値入力フィールドに使用すると、読み書きプレーンテキストのみの bcoz がサポートされません。この問題が発生しました。誰か提案してください。

于 2013-09-30T16:40:06.237 に答える
1

@czuendorf、5 月 13 日 13:53: 私もうまくいきました (Android 4.0 も)。

ただし... type="number" で入力を使用すると、フィールドに入力したときに数字キーボードがポップアップしなくなりますが、代わりに通常のキーボードが表示されます。

-webkit-user-modify を削除すると、右のキーボードが再び表示されますが、編集中の入力要素には境界線が表示されます。私の場合、入力オーバーレイがレイアウトを台無しにしました (一部のコンテンツを下と右に移動しました) が、この新しい css コードではもう発生しません。

于 2013-07-19T11:18:37.993 に答える
1

ツェンドルフパッチのマクナード解析を確認。これらの動作は、Android のバージョンによって大きく異なります。Android 4.0.3 を搭載した実際の Htc デバイスでテストしたところ、アウトラインが消えました (すばらしい!) が、いくつかの深刻なキーボードの問題が発生します (単一のキープレスがフィールドに表示されず、その他の奇妙な動作が見られます...) . エミュレーターでは、キーボードの問題は発生しません。実際のデバイスの解決策は見つかりませんでした。それは残念だ！

于 2014-01-15T10:18:52.487 に答える