web-dev-qa-db-ja.com

iOSサファリが入力type = dateを台無しにする

HTML5の<input type="date" />を使用しています。さまざまなブラウザで正常に動作しますが、すべてを台無しにする人は常にいます。

See the date fields get shrinked on the required size

ここでの問題は、フィールドのサイズです。デザインに Bootstrap v3.2 を使用すると、これらの入力はフォームになり、class="form-control"が含まれるため、（上記のテキスト入力のように）幅が広くなります。および以下を選択してください）。

デートピッカーは100％幅でなければならないとiOSに言う方法はありますか？ style="width:100%"は何もしません。 width:1000pxは確かに機能しますが、width:100% !importantは何もしません。

助けてくれてありがとう！

htmlioscssformstwitter-bootstrap
12
Florian Müller

これは、iOSがinput type="date"を処理する方法です。ネイティブスタイリングは気になりません。見た目は悪いかもしれませんが、iOSを使っている人は慣れています。

日付入力にはmin-width:95%を使用できます。少なくともiOS8ではフィットし、それ以外の場合は外観が変わりません。 Android以前のバージョンのiOSではテストしていませんが、中央に配置するだけで、入力に.center-blockを追加できるので、少なくとも中央に配置されます。見送ってください。

enter image description here

デモ： http://jsbin.com/civor/1/

.input-min-width-95p {min-width:95%;}

HTML：

<input type="date" class="form-control input-min-width-95p" ...
10
Christina

これにより、IOSのすべての日付フィールドが修正されます。

input[type="date"]
{
    display:block;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    min-height: 1.2em;
}
13
Carter Medlin

私の場合、「新しい」で修正しました flexbox レイアウトタイプ：

    input {
        display:flex;
        display:-webkit-flex;
        flex: 1 0 0;
        -webkit-flex: 1 0 0;
    }

デモ： http://output.jsbin.com/bugeqowamu/1

注：デモのように、コンテナにもdisplay: flex;が必要です。

3
Razvan Grigore

以下のコードに示すように、この問題には2つの解決策があります。あなたはそれらからどれでも使うことができます。

IOSでは、メソッド1はこれに伴ってコントロールの幅を拡大し、UIを変更して通常の入力ボックスのように見えます。つまり、メソッド1の出力に示すようにドロップダウンシンボルは表示されず、メソッド2はドロップダウンシンボルを削除せずにコントロールの幅を拡大します。方法2に示す出力

方法1 OUTPUTenter image description here

方法2 OUTPUTenter image description here

.c1{
    -webkit-appearance: none;
    -moz-appearance: none;
}

.c2{
 min-width:95%;
}
Method 1)
<input type="time" class="form-control c1" name="txtIn"
                                                                                                id="txtIn" >
 <br/><br/> <br/>
Method 2)                        
<input type="time" class="form-control c2" name="txtOut"
                                                                                                id="txtOut" >
1
GSB