HTML5 の入力タイプの日付のデフォルトのスタイルを削除する方法については、この記事を通じて詳しく説明します。具体的な紹介は次のとおりです。
2. 日付と時刻のコントロールのスタイルを変更する 現在、WebKit には日付コントロールの UI を変更できる次の 9 つの疑似要素があります。
::-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 – 2017 の 4 文字が占めるスペースなど、年のテキストを制御します::-webkit-inner-spin-button – これは小さな上下矢印:: -webkit-calendar-picker-indicator – これはドロップダウン矢印を制御します::-webkit-clear-button – これはクリア ボタンを制御します
以下には、日付、日時、週、時刻で使用される疑似要素が含まれます。
input::-webkit-datetime-edit{}input::-webkit-datetime-edit-fields-wrapper{}input::-webkit-datetime-edit-ampm-field{}input::-webkit-datetime-edit -day-field{}input::-webkit-datetime-edit-hour -フィールド{}入力::-webkit-日時-編集-ミリ秒-フィールド{}入力::-webkit-日時-編集-分-フィールド{}入力::-webkit-日時-編集-月-フィールド{}入力::-webkit-datetime-edit-second-field{}入力: :-webkit-datetime-edit-week-field{}input::-webkit-datetime-edit-year-field{}input::-webkit-datetime-edit-ampm-field:focus{}input::-webkit -datetime-edit-day-field:focus{}input::-webkit-dateti me-edit-hour-field:focus{}input::-webkit-datetime-edit-millisecond-field:focus{}input::-webkit-datetime-edit-minut-field:focus{}input::-webkit -datetime-edit-month-field:focus{}input::-webki t-datetime-edit-second-field:focus{}input::-webkit-datetime-edit-week-field:focus{}input::-webkit-datetime-edit-year-field:focus{}input:: -webkit-datetime-edit-year-field[無効]{}入力::- webkit-datetime-edit-month-field[無効]{}input::-webkit-datetime-edit-week-field[disabled]{}input::-webkit-datetime-edit-day-field[disabled]{} input::-webkit-datetime-edit-ampm-field[disab] LED]{}input::-webkit-datetime-edit-hour-field[disabled]{}input::-webkit-datetime-edit-milli Second-field[disabled]{}input::-webkit-datetime-edit-分フィールド[無効]{}input::-webkit-datetim e-edit-second-field[無効]{}input::-webkit-datetime-edit-text{}input::-webkit-inner-spin-button{}input::-webkit-calendar-picker-indicator{ }input::-webkit-calendar-picker-indicator:hover{}行の高さと日付型の高さを変更する小さな三角形は、サイズに応じて調整されません。非常に見苦しいので、非表示にすることにしました。
次の CSS は、日付の上と下の三角形を削除できますが、入力タイプが数値である小さな三角形は保持します。
input[type=date]::-webkit-inner-spin-button {可視性:非表示}入力タイプが日付である入力ボックスには次の属性があり、必要に応じて調整できます。
::-webkit-datetime-edit { パディング: 1px; 背景: url(../selection.gif); }::-webkit-datetime-edit-fields-wrapper { 背景色: #eee; webkit-datetime-edit-text { color: #4D90FE; パディング: 0 .3em; }::-webkit-datetime-edit-year-field {色: 紫; }::-webkit-datetime-edit-month-field { color: 青; }::-webkit-datetime-edit-day-field { 色: 緑 }::-webkit-inner-spin-ボタン { 可視性: 非表示 }::-webkit-calendar-picker-indicator {border: 1px 実線 #ccc;border-radius: 2px;box-shadow: inset 0 1px #fff, 0 1px #eee;背景色: #eee;背景画像: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);color: #666;}要約する上記は、HTML5 の入力タイプの日付のデフォルトのスタイルを削除するためにエディターが紹介した方法です。ご質問があれば、メッセージを残してください。エディターが返信します。間に合うように。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！