HTMLで日付スタイルを変更する方法

HTML では、「::-webkit-datetime-edit」擬似要素セレクターを使用して日付形式を変更できます。このセレクターを使用する必要があるのは、要素を選択し、特定のスタイルを設定する場合のみです。具体的な構文は「::-webkit-datetime-edit{property:property-value}」です。

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

時間選択の種類:

日付を選択:d0b8155042013b511075571461c63575

選択時刻: 8b00edaad681f04094ce7f7fa6e370ed

週を選択: 32443c6373b12e499ec69bbfc59530ae

月を選択: < ;input type="month" />

日付と時刻コントロールのスタイルを変更する

現在、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-field{}

input: :-webkit-datetime-edit-milli Second-field{}

input::-webkit-datetime-edit-分フィールド{}

input::-webkit-datetime-edit-month-field{}

input::-webkit-datetime-edit-second-field{}

input::-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-datetime-edit -時間フィールド:フォーカス{}

input::-webkit-datetime -edit-milli Second-field:focus{}

input::-webkit-datetime-edit-minut-field :focus{}

input::-webkit-datetime-edit-month -field:focus{}

input::-webkit-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[無効]{}

input::-webkit-datetime-edit-month-field[無効]{}

input::-webkit-datetime-edit-week-field[無効]{}

input::-webkit-datetime-edit-day-field[無効]{}

input: :-webkit-datetime-edit-ampm-field[無効]{}

input::-webkit-datetime-edit-hour-field[無効]{}

input::- webkit-datetime-edit-milli Second-field[disabled]{}

input ::-webkit-datetime-edit-month-field[disabled]{}

input::-webkit- datetime-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 {
        padding: 1px;
        background: url(../selection.gif);
      }
      ::-webkit-datetime-edit-fields-wrapper {
        background-color: #eee;
      }
      ::-webkit-datetime-edit-text {
        color: #4d90fe;
        padding: 0 0.3em;
      }
      ::-webkit-datetime-edit-year-field {
        color: purple;
      }

      ::-webkit-datetime-edit-month-field {
        color: blue;
      }

      ::-webkit-datetime-edit-day-field {
        color: green;
      }

      ::-webkit-inner-spin-button {
        visibility: hidden;
      }

      ::-webkit-calendar-picker-indicator {
        border: 1px solid #ccc;
        border-radius: 2px;
        box-shadow: inset 0 1px #fff, 0 1px #eee;
        background-color: #eee;
        background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);
        color: #666;
      }

推奨学習: html ビデオ チュートリアル

以上がHTMLで日付スタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。