web-dev-qa-db-ja.com

iOSのSafariでの入力タイプの日付の表示

モバイルデバイスで使用するために、通常の入力タイプの日付を使用しようとしています。ただし、CSSで設定された幅は、Safari（またはWebkit）によって無効にされます。

CSSに-webkit-appearance: none;を追加できます。これにより、幅は期待どおりに機能します。しかし、それから私は必要な他のすべてのスタイリングを失います。たとえば、それがピッカーであることを示す矢印です。

入力タイプの日付の基本的なスタイルを維持しながら、幅を自分で管理する方法はありますか？

htmlioscssmobilewebkit
13
SamJ

-webkit-appearance: none;は常にピッカーの典型的なスタイルを削除します...しかし、CSSと背景画像を使用して矢印を簡単に追加できます。

入力をカスタムスタイルにする方法だけでなく、矢印を維持する方法もわかりません。

13
Dion

追加 -webkit-min-logical-width: <your desired value>。それは私にとって問題を解決しました！

9
Boldizsar

input[type='date']とinput[type='time']のみを選択する場合は、このCSS行を試してください。

input[type='date'], input[type='time'] {
    -webkit-appearance: none;
}
4
eclaude

@Boldizsarの回答に従って100％の幅を正しく取得するには、iOSのドロップダウン矢印によって追加された幅を削除するためのCSS計算アクションが少し必要であることがわかりました。

-webkit-min-logical-width: calc(100% - 16px);
1
Phil Cook