web-dev-qa-db-ja.com

入力日付のxおよび上/下矢印要素を取り除く方法は？

enter image description here

私がボックスに表示する必要があるのはオレンジ色の三角形だけであり、三角形の左側にある2つの要素を取り除くためにCSSなどが必要かどうかはわかりません。

そうする方法はありますか？入力タイプdateを使用しています。

フィドル： http://jsfiddle.net/5M2PD/1/

htmlcssinput
47
Paulius Dragunas

擬似クラス-webkit-inner-spin-buttonを使用して、Webkitベースのブラウザーに固有のスタイルを設定します。

http://jsfiddle.net/5M2PD/2/

input[type=date]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}

ドロップダウン矢印のスタイルを変更する場合は、擬似クラス-webkit-calendar-picker-indicatorを使用します。

input[type=date]::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
    display: none;
}

クリアボタンを削除するには、入力を必須に設定します。

http://jsfiddle.net/5M2PD/3/

<input type="date" required="required" />
79
saluce

クリアボタンを削除するには、次を使用します。

::-webkit-clear-button
{
    display: none; /* Hide the button */
    -webkit-appearance: none; /* turn off default browser styling */
}

補足として、IE10 +でこれを行うには（ source ）、これを使用します。

::-ms-clear { }

これは<input type="text" />、IEにクリアボタンも配置されるようになりました。

WebKitブラウザーで日付コントロールの残りのスタイルを設定するには、 このリンク を確認することをお勧めします。要約すると、次の擬似クラスで遊ぶことができます。

::-webkit-datetime-edit { }
::-webkit-datetime-edit-fields-wrapper { }
::-webkit-datetime-edit-text { }
::-webkit-datetime-edit-month-field { }
::-webkit-datetime-edit-day-field { }
::-webkit-datetime-edit-year-field { }
::-webkit-inner-spin-button { }
::-webkit-calendar-picker-indicator { }

また、デフォルトのブラウザスタイルをオフにするために、以下を使用することを強くお勧めします。これは、モバイルブラウザで作業するときに特に役立つことがわかりました。

input[type="date"]
{
    -webkit-appearance: none;
}
39
vee